Tips User-Interface

Halo semua 👋🏻. Di tutorial ini, kita akan sama-sama belajar cara membuat homepage booking tiket film. Pada tutorial ini kita akan menggunakan fitur dari Figma yaitu auto layout. Mengapa membuat homepage terlebih dahulu? Homepage pada aplikasi booking tiket film penting karena memberikan kesan pertama, memudahkan pencarian film dan bioskop, menampilkan film populer dan promo, serta mengarahkan pengguna untuk segera memesan tiket. Yuk kita mulai desainnya! 1. Memilih Frame Frame yang digunakan pada desain ini yaitu menggunakan template iPhone 14 & 15 pro dengan ukuran 303x852 pixels. Untuk warna background pada frame menggunakan warna #F8F8F9 2. Membuat Header Logo Buatlah lingkaran menggunakan tools ellips (menekan huruf “O” pada keyboard). Beri ukuran 48 px. Setelah itu beri warna dengan menggunakan gradient dan memberi warna yang sudah tertera pada gambar di atas. Untuk ikonnya, aku menggunakan plugin dari Figma yaitu Iconify dan cari ikon dengan kata kunci antara lain “movie”, “cinema”, dan “film”. Ukuran ikonnya 28 px Kemudian select kedua object dan beri align horizontal centers dan align vertical centers dan kedua object tekan Ctrl+G pada keyboard untuk digabungkan menjadi satu. Dan beri nama layer menjadi “icon”. Buatlah teks dengan menggunakan typeface Poppins ukuran 20 pts dan menggunakan tipe bold. Kemudian select layer teks dan letakan di samping kanan layer “icon”. Dan select keduanya dan beri auto layout lalu ubah opsi Horizontal gap between items: 10px 3. Membuat Search Bar Membuat search bar kita akan menggunakan auto layout. Berikut langkahnya: Masukkan ikon search tipe outline dari Iconsax ukuran 24px.Buat teks “Search movies . . .” = Poppins, Regular, 14, warna #B2B5BA kemudian letakan di samping kanan ikon searchSelect teks “Search movies. . . “ dan ikon search dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 12pxAlign leftHorizontal padding: 14pxVertical padding: 16pxRezize search bar dengan width: 361px, height: 58px, dan ubah corner radius: 20Beri warna fill #E8E8E8 4. Membuat desain container “Now Playing” Buat teks “Now Playing” = Poppins, bold, 16, warna #13181DBuat teks “See all” = Poppins, medium, warna #F97316 kemudian letakan di sebelah kanan teks “Now Playing”Select kedua teks dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: AutoAlign: middleSelect objek lalu ubah size width: 361px Untuk gambar poster film, kita akan mengambil 3 poster film. Pada kasus ini kita akan mengambil poster film Twisters, Deadpool & Wolverine, dan Longlegs . Berikut langkahnya: Letakan poster film Twisters dengan size width: 165px, height: 245px, ubah corner radius: 10Letakan poster *film *Deadpool & Wolverine di samping kanan poster film Twisters dengan size width: 173px, height: 257px, ubah corner radius: 10Letakan poster *film *Longlegs di samping kanan poster film Deadpool & Wolverine dengan size width: 165px, height: 245px, ubah corner radius: 10Select ketiga film poster dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi: Untuk membuat movie title dan kategori chip akan dijadikan auto layout, Berikut langkahnya: Buat teks “Deadpool & Wolverine” = Poppins, bold, 20, warna #13181DUntuk kategori chip, ikurin langkahnya:Buat teks “Action” = Poppins, regular, 12, warna #F97316Select teks “Action” dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align centerHorizontal padding: 8pxVertical padding: 4pxBeri warna fill #FFE5D3Buatlah yang sama pada teks “2h30m”, dan “D17”Letakan chip “2h30m” di samping kanan chip “Action”Letakan chip “D17” di samping kanan chip “2h30m”Select ketiga chip dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 8pxLetakan kategori chip dibawah teks movie title, kemudian select teks movie title dan kategori chip dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 8pxAlign center Letakan teks “Now Playing”, “See all” di atas, poster film di bawahnya, dan movie title, kategori chip di bawah poster film. Kemudian select ketiganya dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi: Gap between items: 16pxAlign center 5. Membuat desain container “Coming Soon” Buat teks “Coming Soon” = Poppins, bold, 16, warna #13181DBuat teks “See all” = Poppins, medium, warna #F97316 kemudian letakan di sebelah kanan teks “Now Playing”Select kedua teks dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: AutoAlign: MiddleSelect objek lalu ubah size width: 361px Lalu untuk movie card ini pertama taruh gambar poster film dengan ukuran yang sudah ditentukan pada kasus ini kita akan mengambil poster film Trap, Borderlands, dan Mufasa: The Lion King. Berikut langkahnya: Masukkan poster film Trap dengan size width: 125px, height: 188px, ubah corner radius: 10Di bawahnya letakan teks “Trap” = Poppins, semibold, 14, warna #13181DDi bawah teks “Trap” buatlah kategori chip yang langkahnya sama seperti membuat di desain container “Now Playing”Select tiga kategori chip dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Ubah direction: wrapHorizontal gap between items: 8pxVertical gap between items: 8pxUbah size width: 125pxBuatlah yang movie card sama pada film Borderlands dan **Mufasa: The Lion King Movie card yang sudah dibuat, select ketiga card ini di-select lalu dijadikan ke auto layout lalu ubah opsi: Horizontal gap between items: 16pxAlign: left Akhirnya select “Coming Soon” dan movie card dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi: Vertical gap between items: 16pxAlign: Top left 6. Membuat Navigation Bar Dalam membuat navigation bar, ikuti langkah-langkah berikut: Masukkan ikon home, buildings, dan ticket. Ikon ini dapat diambil dari Iconsax dari community Figma.Berikan teks informasi di bawah ikon:Pada ikon home beri teks “Home” = Poppins, medium, 12, warna #F97316pada ikon buildings beri teks “Theatre” = Poppins, medium, 12, warna #13181DPada ikon ticket beri teks “My Order” = Poppins, medium, 12, warna #13181DPada ikon home dan teksnya beri warna yang sudah ditentukan di gambarSelect setiap ikon dan teks, dijadikan auto layout dan ubah opsi:Vertical gap between items: 4pxAlign: top centerSelect ketiga object lalu dijadikan auto layout dan atur jaraknya sesuai tertera pada gambar jangan lupa beri warna filling yaitu warna putih.Atur size navigation bar sesuai dengan gambar. 7. Menyusun desain-desain komponen Setelah komponen-komponen sudah dibuat, waktunya menyusun menjadi homepage, dimulai dari Header logo —>Search bar—>Now Playing—>Coming Soon—>Navigation bar. Tiap komponen jangan lupa diberi jarak sesuai dengan gambar di atas. Result Nice! Dengan mengikuti step by step, akhirnya kamu berhasil membuat homepage untuk booking tiket film. Good job!!! Kesimpulan Pembuatan desain homepage untuk aplikasi booking tiket film, penting untuk memberikan kesan pertama yang menarik, memudahkan navigasi dan pencarian film, menampilkan film yand sedang ditayang dan mengarahkan pengguna untuk segera memesan tiket. Juga dalam mendesain menggunakan auto layout di Figma memungkinkan desainer untuk membuat desain yang responsif dan mudah disesuaikan, memastikan elemen-elemen UI tetap rapi dan terorganisir dengan baik di berbagai ukuran layar. Mau belajar lebih dalam mengenai UI Design? Yuk belajar UI Design bersama BuildWithAngga dan cek kelas-kelas terbarunya! Kredit Asset poster film diambil dari IMDb https://www.imdb.com/title/tt6263850/mediaviewer/rm136803841/?ref_=tt_ov_ihttps://www.imdb.com/title/tt12584954/mediaviewer/rm3285740033/?ref_=tt_ov_ihttps://www.imdb.com/title/tt23468450/mediaviewer/rm800947457/?ref_=tt_ov_ihttps://www.imdb.com/title/tt26753003/mediaviewer/rm933197569/?ref_=tt_ov_ihttps://www.imdb.com/title/tt4978420/mediaviewer/rm2581545217/?ref_=tt_ov_ihttps://www.imdb.com/title/tt13186482/mediaviewer/rm1126268417/?ref_=tt_ov_i

Dalam era digital yang terus berkembang, saat ini desain antarmuka pengguna (UI) dan pengalaman pengguna (UX) memainkan peran penting dalam menentukan keberhasilan suatu aplikasi atau situs web. Salah satu tren yang semakin populer dan memberikan dampak besar adalah penggunaan elemen 3D. Elemen 3D tidak hanya menambah dimensi visual yang menarik, tetapi juga meningkatkan interaksi dan keterlibatan pengguna. Dengan teknologi yang semakin canggih, elemen 3D kini lebih mudah diimplementasikan dan diakses, membuatnya menjadi pilihan favorit bagi designer yang mau memberikan pengalaman yang lebih realistis dan mendalam. Pada artikel ini kita akan membahas kenapa kita butuh elemen 3D dalam desain UI/UX, manfaat yang bisa diperoleh dari menggunakan 3D elemen serta plugin Figma 3D gratis yang bisa kamu pakai dalam desainmu! Kenapa Kita Harus Pakai Element 3D dalam Desain UI/UX Kita? Apa yang dimaksud dengan Element 3D? Elemen 3D dalam desain UI/UX mengacu pada penggunaan objek tiga dimensi yang dapat memberikan dimensi tambahan pada tampilan antarmuka pengguna. Elemen ini bisa berupa model 3D, animasi, atau efek yang memberikan ilusi kedalaman dan realisme yang tidak bisa dicapai dengan desain 2D 🤩 Image by Vector to 3D Figma Plugin Lalu Apa Alasan Kita untuk Menggunakan Element 3D Tersebut? Meningkatkan Keterlibatan PenggunaInteraksi Lebih Menarik: Elemen 3D membuat UX lebih interaktif dan menarik. Misalnya, model produk 3D yang bisa diputar dan dilihat dari berbagai sudut dapat membuat user lebih tertarik dan terlibat.Visualisasi Lebih Realistis.Detail yang Lebih Menarik: Elemen 3D memungkinkan detail yang lebih baik dan kompleks dibandingkan dengan elemen 2D. Ini sangat berguna dalam aplikasi seperti arsitektur, desain produk, atau e-commerce, di mana pengguna perlu melihat objek secara detail.Estetika dan Daya Tarik VisualDesain Lebih Modern dan Menarik: Elemen 3D dapat memberikan tampilan yang lebih modern dan inovatif, menarik perhatian dan memberikan kesan profesional pada aplikasi atau situs web. Plugin 3D Element Figma yang Dapat Kamu Pakai Gratis! Fig3D Plugin ini memungkinkan desainer membuat elemen 3D langsung dalam Figma tanpa perlu alat tambahan. Fig3D menggunakan real-time editing, kamu dapat melihat perubahannya langsung. Fig3D kompatibel dengan fitur asli Figma, sehingga integrasi dengan proyek yang sudah ada berjalan mulus. 3D Wave 3D Wave memungkinkan pembuatan efek gelombang 3D yang menarik dan dinamis. Kamu dapat menyesuaikan parameter seperti frekuensi, amplitudo, dan warna untuk menciptakan efek unik. Dirancang untuk integrasi mudah, 3D Wave berfungsi dengan desain Figma yang sudah ada tanpa memerlukan penyesuaian besar. Waitt… Sebelum lanjut, kira-kira kamu tau gak bedanya 3D Design dan Flat Design? Kalau 3D Desain itu: Dimensi: Menampilkan elemen dengan kedalaman dan volume, menciptakan kesan realistis.Fokus: 3D Design memberikan pengalaman yang terasa nyata dan visualisasi detail, sering digunakan untuk produk kompleks atau estetika modern. Sedangkan Flat Design: Dimensi: Elemennya flat, tanpa kedalaman, mengandalkan warna, bentuk, dan tipografi.Fokus: Flat Design menyederhanakan tampilan, memprioritaskan kejelasan dan minimalis. Ideal untuk UI/UX yang mementingkan kemudahan penggunaan dan kecepatan loading. Nah sudah tau kan bedanya 3D Design dan Flat Design? Yuk lanjut 😄 Simple 3D Simple 3D menawarkanmu interface yang mudah digunakan untuk menciptakan elemen 3D dasar dengan cepat dan efisien tanpa proses yang rumit. Selain itu, Simple 3D ini ringan dan tidak membebani Figma, sehingga tetap menjaga kinerja yang optimal. Hologram Shape PNG Pack #2 Dalam Hologram Shape PNG Pack #2 ini menyediakan berbagai bentuk hologram dalam format PNG berkualitas tinggi yang siap digunakan. Grafiknya memberikan efek 3D dan holografis yang menarik, dan dapat diimpor ke dalam proyek Figma dengan mudah tanpa perlu penyesuaian tambahan. Vector 3D Vector to 3D memungkinkan kamu untuk konversi objek vektor 2D menjadi elemen 3D dengan pengaturan fleksibel seperti perspektif, kedalaman, dan sudut. Plugin ini mempertahankan kualitas vektor asli sambil menambahkan dimensi 3D, memudahkan pengeditan dan penyesuaian lebih lanjut. Manfaat Elemen 3D dalam Desain UI/UX Meningkatkan Estetika Desain: Memberikan kesa modern dan profesional pada desainmu, sehingga meningkatkan kredibilitas dan citra brand.Membedakan desain dari pesaingmu dengan menawarkan visual yang unik dan menarik. Meningkatkan Pemahaman User: Menunjukkan hubungan antar elemen dengan lebih jelas, sehingga membantu pengguna dalam navigasi dan pengambilan keputusan. Memperluas Chance Desain Lebih Menarik: Memungkinkan desainer untuk membuat elemen interaktif yang menarik, seperti tombol 3D, animasi, dan efek visual.Memberikan peluang untuk menciptakan pengalaman pengguna yang lebih personal dan imersif, seperti avatar 3D dan lingkungan virtual. Penutup 💬 Elemen 3D dalam desain UI/UX memberikan banyak keuntungannya loh, seperti meningkatkan interaksi pengguna dan visualisasi yang lebih realistis. Kemajuan teknologi memudahkan implementasinya. Elemen 3D menjadi populer karena kebutuhan pasar akan pengalaman pengguna yang interaktif dan estetika modern. Meskipun begitu, tentu ada tantangan dalam performa dan kompleksitas. Elemen 3D kasih banyak kelebihan, menjadikannya investasi yang worth it bagi desainer. Dengan pemahaman dan penggunaan yang efektif, desainer dapat menciptakan UI yang menarik secara visual dan memberikan UX yang keren. Kamu bisa belajar lebih jauh tentang penggunaan 3D dalam desain UI/UX di kelas 3D BuildWithAngga dan bangun portfolio berkualitas! So, see you di kelas

Di era digital ini, memesan makanan online telah menjadi kebiasaan banyak orang! Hal ini membuka peluang bagi para pengusaha kuliner untuk menjangkau lebih banyak pelanggan melalui platform pemesanan makanan online. Namun, di antara banyaknya platform yang tersedia, memiliki UI desain homepage yang berkualitas menjadi kunci untuk menarik perhatian pengunjung loh. Homepage adalah halaman pertama yang dilihat pengunjung, dan desainnya harus mampu memberikan first impression yang positif dan mendorong mereka untuk menjelajahi lebih lanjut. Desain yang menarik dan informatif dapat membantu pengunjung menemukan menu yang mereka inginkan dengan mudah, membangun kepercayaan terhadap platform, dan pada akhirnya mendorong mereka untuk memesan makanan. Pada artikel kali ini, kita akan belajar cara membuat UI desain homepage aplikasi order makanan. Penasaran gimana cara membuat tampilan UI seperti ini? Yuk belajar bareng ;) 1. Siapkan Frame Langkah pertama, siapkan frame dengan ukuran W: 267 dan H: 529 dengan warna #F3F3F3 yaa 2. Siapkan Header, Search Bar dan Top Picks Pada bagian atas desain, kamu bisa masukan informasi alamat rumah dan ikon “Favorite” dan “Notification”. Buat “Search Bar” dengan mengikuti gambar di atas menggunakan auto layout. Masukan ikon search, kata “Search” dan ikon “Mic” lalu gabungkan dan jadi satu dalam bar. Buat “Top Picks” untuk menu-menu andalan resto dan bisa kamu ikuti pengaturan di atas. 3. Desain Container “Top Picks” Pertama, buat kotak dengan W: 130 dan H: 216 dan corner radius 15. Lalu untuk image makanan, kamu insert dulu kotak yang lebih kecil berukuran W: 130 dan H: 111 dengan corner radius atas kanan-kiri 15, serta sisi bawah kanan-kiri 0. Select kotak kecil tersebut dan masukan image makanan yang bisa kamu dapatkan dari unsplash 🙂 Untuk isi kotak pertama, kamu bisa ikuti untuk menu makanan, lokasi resto, harga dan rating makanan seperti panduan di atas. Masukan “+” ke dalam circle sebagao button untuk menambahkan menu ke keranjang pembelian. Ulangi hingga kamu membuat beberapa card menu makanan ya 😄 4. Container “Our Recommendation” Untuk kontainer kali ini, buat rectangle warna #FFFFFF dengan H:333 dan W: 151 serta corner radius 15. Buat lagi kotak yang lebih kecil untuk image makanan= W: 122 dan H: 135 dan corner radius 8Select kotak tersebut lalu masukan image makanan yang bisa kamu dapatkan di unsplash Untuk informasi pendukung lain Card ini, kamu bisa masukan nama menu, nama resto, lokasi resto, harga dan button untuk menambahkan pesanan. Ulangi sampai menjadi beberapa card untuk kontainer Our Recommendation 🎉 5. Membuat Bottom Navigation Bar Cara membuat Button Navigation Bar yang mudah adalah sebagai berikut: Masukan icon “Home”, “Keranjang”, “Saved” dan “Profile”Tambahkan informasi ikon seperti di icon home, berikan teks “Home”; untuk icon keranjang tambahkan tulisan “My Order” dan begitu selanjutnya untuk ikon-ikon lain.Ubah warna icon home dengan #627256 untuk menandakan bahwa kamu sedang berada di page “Home”Untuk ukuran icon, kita pakai di ukuran 24px dan size untuk informasi ikon di 9pxSelect ikon dan nama ikon lalu Shift A untuk mengaktifkan auto layout. Atur jarak antar ikon dan nama ikon.Untuk warna ikon lain yang sedang tidak running, kamu bisa gunakan #292D32 yaaSetelah masing-masing ikon sudah di auto layout, select semua icon dan beri auto layout lagi dan atur jarak seperti gambar di atas. Finishing! Masukan “Status Bar” di sisi paling atas desain dan “Home Bar” di bagian bawah desain 😄 Result ✨ Selesai! Dengan mengikuti step-step di atas, kamu bisa membuat tampilan homepag untuk aplikasi order makanan 🤩 Dengan desain yang tepat, platform pemesanan makanan dapat meningkatkan brand awareness, meningkatkan konversi, dan membangun loyalitas pelanggan. Yuk belajar UI/UX bersama di buildwithangga dan asah skill-mu! Tips: Untuk aset image, kamu bisa dapatkan di unsplashUntuk aset icon, kamu bisa dapatkan di IconsaxUntuk aset Status Bar iPhone kamu bisa dapatkan di sini yaa Goodluck! 🤩

Hello people with the spirit of learning! Di artikel kali ini, kita akan belajar cara membuat homepage aplikasi travel, membuat komponen dan ikon yang jelas, membuat button navigation bar serta auto layout dengan step-step sederhana yang bisa kamu ikuti. Ada beberapa alasan mengapa membuat homepage aplikasi travel yang menarik itu penting seperti: Meningkatkan first impressionMeningkatkan brand awarenessMembedakan diri dari kompetitor Jadi, mari kita mulai prosesnya! 😄 1. Siapkan Frame Pertama, siapkan frame. Di sini, kita akan pakai ukuran iPhone 14 & 15 Pro yaa dengan background #FFFFF (putih) dengan layout grid coloumns: Count= 4Margins= 30Gutter= 20 2. Header: Area Profile-mu Lalu kita mulai siapkan elemen-elemen dari awal! Kita buat dulu bagian profile-nya ya :) Profile picture: Buatlah lingkaran 48px dan masukan image foto pengguna“Hi Adnan”: Untuk nama, buat di ukuran 22px dengan Bold dan warna seperti di atas“Welcome 👋🏻”: Di ukuran 14px dengan warna seperti di atas, dan style MediumLingkaran Icon Notifikasi: 46px dengan ketebalan stroke dan warna seperti di atasIcon Notifikasi: 24pxUntuk icon kamu bisa dapatkan di sini yaa! 3. Membuat “Search Bar” Untuk mendesain “Search Bar”, kita akan gunakan auto layout. Pertama, masukan icon search dan kata “Search” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift A (mengaktifkan auto layout) Lalu tambahkan juga icon “Filter” di 24px. Select icon tersebut dan select “Search” yang sudah di auto layout tadi maka ketiganya akan menjadi satu komponen dengan pengaturam seperti di atas. Eitsss sebelum lanjut, kenapa sih kita haru pakai auto layout? Menggunakan auto layout dalam UI/UX design itu penting karena: Responsiveness: Desainmu otomatis menyesuaikan ke berbagai ukuran layar.Efisiensi: Menghemat waktu dalam penyesuaian elemen desain.Consistency: Menjaga keseragaman layout.Scalability: Mudah mengelola desain kompleks.Collaboration: Memudahkan kerja tim dengan struktur yang sama.Adaptability: Memudahkan penyesuaian dengan konten dinamis. Auto layout membuat desainmu lebih fleksibel, efisien, dan mudah diatur. Ayo kita lanjut 😄 4. Desain “Featured” dan “See All” Ketik “Featured”: Poppins, Semibold dan 22px“See All”: Poppins, Medium dan mengikuti arahan pengaturan seperti di atas.Shift A: Select keduanya Featured dan See All lalu klik Shift A untuk mengaktifkan auto layout dan atur jarak antar kata. 5. Card Destinasi Wisata Untuk membuat Card ini, kamu bisa ikuti langkah-langkah di atas seperti: Buatlah Rectangle background dengan ukuran seperti di image.Tambahkan kotak untuk foto atau gambar destinasi wisata yang bisa kamu dapatkan dari unsplash.Untuk bagian “Rating”, kamu tinggal mengikuti setting-an di atas seperti size text, icon bintang dan lainnya menggunakan auto layout. 6. Elemen dalam Card Apa saja yang perlu di masukan ke dalam Card? Kategori Nama Tempat: Apakah ini Apartment atau Hotel? Kamu bisa membuat komponen ini dulu.“Apartment”: Aktifkan auto layout, ketik “Apartment” dengan warna, size dan style seperti di atas. Lalu Shift A untuk aktifkan auto layout-nya. Dengan begitu, “Apartment” memiliki bisa background.Tambahkan Corner Radius 15°Tambahkan informasi harga sewa per malam seperti contoh di atas.Gabungkan element “Apartment” dan “Price” dengan auto layout dan ikut instruksi pengarutan jarak di atas,Untuk bagian price, select “$1,900” dengan style Medium 14px, #2552E1 lalu select “/month” dengan style Medium 7px, #6D6F6C. 7. Informasi Destinasi Di dalam Card, tambahkan juga informasi destinasi lainnya seperti nama tempat wisata dan letaknya. Kamu bisa mengikuti langkah di atas seperti: Informasi “Lavender Manor” dengan style Medium, 14px , #232323 dan nama negara/kota dijadikan auto layout. Lalu atur jarak antar kata atas dan bawahnya.Untuk ikon location, ukurannya adalah 12px, #2552E1Untuk ikon like atau hati, gunakan di ukuran 18px Langkah Awal = Done 🎉 Ulangi step membuat Card dan Subheading di atas untuk membuat kontainer “Our Recommendation” yaa 🤩 8. Kategori Tempat Penginapan Untuk mempermudah user, kita akan membuat kategori penginapan yang bisa user akses hanya dengan satu kali klik seperti ingin di-filter untuk kelompok “Villa” atau “Apartment” atau semua kategori penginapan “All”. Buat button “All”: Press “T” untuk memasukan teks “All” lalu Shift A. Ikut pengaturan seperti di atas.Tekan “T” untuk masukan button “Villa”, “Apartment”, “Home” lalu masing-masing tambahkan auto layout untuk mengatur spacing button dan menambahkan stroke seperti di atas. 9. Card “Our Recommendation” Sebenarnya sama seperti Card sebelumnya, hanya perhatikan ada perbedaan size kotak dengan W: 156 dan H: 187. Untuk image, kalian bisa ambil dari unsplash yaa You’re close to the final step! Untuk tampilan homepage sejauh ini jadi seperti ini guys! Nah sekarang, apa yang kurang yaa? 10. Membuat Button Navigation Bar! Yap betul guys! Sekarang kita akan membuat “Button Navigation Bar”. Ada yang tau fungsinya apa? Yuk simak sebentar 😊 Memberikan akses cepat ke halaman utamaMembantu pengguna memahami struktur aplikasiMeningkatkan retensi penggunaMempercantik tampilan aplikasi Dan untuk membuat button navigation bar kali ini, kalian bisa mengikuti step-step di atas ya! Perhatikan size ikon dan warnanya serta informasi pendukung ikon. Berikan warna pada button yang sedang running semisal page “Home” Untuk icon, gunakan ukuran 24px dan font di ukuran 9 :) Jarak antar icon dan teks atas-bawah adalah 12px Result!! Tadaa! Setelah menambahkan button navigation bar ke dalam homepage, tampilan akan menjadi lebih menarik dan mudah digunakan oleh user! Pentingnya tampilan Card, elemen-elemen, button, dan button navigation bar yang jelas akan membuat user mudah tahu, aplikasi atau website apa yang sedang ia jalankan. Kesimpulan Membuat homepage yang menarik dan informatif untuk aplikasi travel mobile-mu itu kunci untuk meningkatkan first impression, konversi, dan brand awareness. Dengan mengikuti langkah-langkah yang telah dibahas, kamu dapat membangun homepage yang mudah dinavigasi, informatif, dan menarik bagi pengguna 🎉 Tips: untuk aset image seperti UI di atas, kamu bisa ambil gambar dari unsplash,kamu bisa gunakan icon dari Iconsax - 6,000 icons,sedikit tips untuk pemilihan font, kamu bisa gunakanPoppins: Poppins dirancang khusus untuk keterbacaan di layar, dengan proporsi huruf yang seimbang dan spasi antar huruf yang ideal seperti UI desain ini.Roboto: Font sans-serif modern yang mudah dibaca dan tersedia dalam berbagai bobot dan style.Montserrat: Font sans-serif yang unik dan menarik, dengan nuansa yang sedikit retro. Yuk join kelas ui/ux di buildwithangga untuk kamu yang ingin asah skill dan bangun portfolio berkualitas! 🥰

Membuat desain UI/UX yang menarik dan mudah digunakan membutuhkan berbagai elemen, seperti ikon, ilustrasi, foto, dan tipografi. Menemukan elemen-elemen ini secara gratis dan berkualitas tinggi bisa menjadi tantangan. Untungnya, ada banyak situs web yang menyediakan design assets gratis untuk UI/UX. Pada artikel kali ini, kita akan membahas 5 situs terbaik yang wajib dicoba para UI/UX desainer pemula, beserta keunggulannya! Craftwork Craftwork menawarkankamu berbagai macam aset desain UI/UX gratis dan berbayar, termasuk ikon, ilustrasi, foto, dan tipografi. Koleksinya dipilih dengan cermat dan memiliki gaya modern yang konsisten. Craftwork juga menyediakan file Figma dan Sketch agar kamu dapat dengan mudah menggunakan asetnya dalam proyek desainmu. Kelemahan Craftwork: Ketersediaan Konten: Koleksi ilustrasi Craftwork walaupun berkualitas tinggi, namun tidak seluas platform seperti Freepik. Hal ini dapat membatasi pilihan desainer untuk project tertentu.Harga: Craftwork menawarkan paket berlangganan bulanan dan tahunan, namun tidak ada pilihan pembayaran per ilustrasi. Hal ini bisa menjadi kurang menarik bagi desainer yang hanya membutuhkan ilustrasi hanya sesekali. Jangan khawatir karena craftwork juga memiliki keunggulannya seperti: Desain yang Unik: Craftwork menawarkan banyak desain unik dan kreatif yang tidak dapat kamu temukan di tempat lain lohUser-friendly: Platform Craftwork mudah digunakan dan dinavigasi, sehingga Anda dapat dengan cepat menemukan aset yang kalian cari.Opsi Gratis: Craftwork juga menyediakan banyak aset desain gratis yang dapat kamu unduh dan gunakan tanpa biaya! UI8 Sedangkan UI8 adalah platform yang menawarkan berbagai sumber daya desain premium seperti UI kit, wireframe, ikon, dan ilustrasi untuk membantu desainer mempercepat alur kerja, meningkatkan kualitas desain, dan menghemat biaya. UI8 juga memiliki komunitas desainer yang besar dan aktif untuk saling berbagi ide dan belajar. Berikut beberapa kelemahan UI8 yang perlu dipertimbangkan: Pilihan Tergolomh Terbatas: UI8 memiliki koleksi elemen desain yang lebih kecil dibanding platform lain seperti Freepik. Hal ini dapat membatasi pilihan bagi desainer yang mencari variasi dan spesifikasi yang lebih luas.Harga: UI8 menawarkan paket berlangganan dengan harga yang bisa dibilang relatif mahal, terutama untuk kamu sebagai pemula atau desainer dengan anggaran terbatas. Meskipun begitu, UI8 juga memiliki kelebihannya kok seperti: Kualitas tinggi: Semua aset desain di UI8 dibuat dengan kualitas tinggi dan profesional. Hal ini memastikan bahwa desain kamu pasti akan terlihat terbaik.Pilihan yang masih cukup beragam: UI8 memberikan dan menawarka berbagai macam pilihan aset desain, sehingga Anda dapat menemukan gaya yang sesuai dengan kebutuhanmuCocok untuk pemula dan profesional: UI8 mudah digunakan oleh pemula, tetapi juga memiliki fitur yang kuat untuk memenuhi kebutuhan profesional. getillustrations Lalu ada Getillustrations yang unggul dalam menyediakan koleksi ilustrasi vektor yang luas dengan lebih dari 8.500 images, kualitas tinggi yang dibuat oleh desainer profesional, harga terjangkau dengan berbagai pilihan paket, kemudahan penggunaan, dan layanan pelanggan yang baik. Platform ini menjadi sumber daya berharga bagi desainer yang membutuhkan ilustrasi berkualitas tinggi untuk proyek mereka 🤩 Meskipun Getillustrations menawarkan banyak keunggulan, platform ini juga memiliki beberapa kelemahan yang perlu dipertimbangkan: Harga: Getillustrations memiliki paket berlangganan bulanan dan tahunan, namun tidak ada pilihan pembayaran per ilustrasi. Hal ini bisa menjadi kurang menarik bagi desainer yang hanya membutuhkan ilustrasi sesekali.Opsi Pencarian: Fitur pencarian Getillustrations seharusnya bisa lebih baik. Pengguna mungkin mengalami kesulitan menemukan ilustrasi yang tepat dengan kata kunci tertentu. Ada pun kelebihan getillustrations seperti: Koleksi Besar: Lebih dari 8.500 ilustrasi vektor premium yang siap pakai.Format Lengkap: Tersedia dalam format AI, SVG, Figma, Sketch, Adobe XD, juga PNG.Lisensi Komersial Standar: Produk yang ada di sini bebas digunakan untuk proyek komersialmu 🤩 ls.graphics ls.graphics menarik perhatian para desainer dengan koleksi aset desain premium yang lengkap, kualitas aset tinggi yang terkurasi dengan cermat, harga terjangkau, kemudahan penggunaan, dan layanan pelanggan yang baik. Is.graphics ini membantu desainer menghemat waktu, meningkatkan kualitas desain, dan menghemat biaya, menjadikannya pilihan menarik bagi para profesional dan freelancer. ls.graphics pun memiliki kekurangannya juga loh seperti: Fitur Gratis Terbatas: Versi gratis Is.graphics hanya menyediakan akses ke jumlah terbatas aset desain. Pengguna yang ingin menggunakan lebih banyak aset perlu berlangganan paket premium.Harga: Is.graphics menawarkan paket berlangganan bulanan dan tahunan, dengan harga yang lebih mahal dibandingkan platform lain seperti Freepik. Sekarang mari kita lihat keunggulan ls.graphics ini! Beragam Format: Aset desain telah tersedia dalam berbagai format yang kompatibel dengan berbagai software desain.Kualitas Tinggi: Aset desain di LS.Graphics memiliki kualitas tinggi dan profesional.Update Teratur: ls.graphics selalu diperbarui dengan aset desain baru dan fitur-fitur menarik 😄 Freepik Freepik unggul dalam menyediakan koleksi aset desain yang luas dan berkualitas tinggi, dengan jutaan pilihan vektor, foto, ikon, dan template gratis dan premium loh. Platform ini sangat mudah digunakan, menawarkan harga terjangkau, dan memiliki komunitas desainer yang aktif untuk saling berbagi dan belajar. Freepik menjadi sumber daya penting bagi desainer untuk menyelesaikan proyek mereka dengan desain yang menarik! Freepik pun memiliki kelemahan seperti: Kualitas Konten: Meskipun Freepik memiliki banyak aset desain gratis, kualitasnya tidak selalu konsisten. Bahkan beberapa aset mungkin memiliki resolusi rendah atau terlihat tidak profesional.Iklan: Freepik gratis menampilkan iklan, yang dapat mengganggu dan mengganggu pengalaman pengguna. Sekarang mari kita lihat keunggulannya: Tersedia dalam berbagai bahasa: Freepik tersedia dalam berbagai bahasa, termasuk bahasa Indonesia.Aplikasi mobile: Freepik memiliki aplikasi mobile yang memudahkan Anda untuk mengakses aset desain dari mana saja.Punya beragam Pilihan: Freepik memiliki jutaan aset desain dengan berbagai macam style dan tema, jadi kamu dapat menemukan apa yang kamu sedang cari dan butuhkan. Kesimpulan 💬 Pada akhirnya, pemilihan platform yang ideal bergantung pada kebutuhan dan preferensi spesifikmu. Kalau kamu yang mencari elemen desain antarmuka pengguna, UI8 menjadi yang terdepan.Desainer yang membutuhkan banyak aset gambar akan menemukannya di Freepik.Untuk yang mencari ilustrasi buatan tangan dengan kualitas luar biasa, Craftwork menjadi pilihan utama.Desainer yang menginginkan elemen desain premium yang dikurasi dengan baik akan cocok dengan Is.graphics.Dan bagi yang mencari perpaduan ilustrasi-ilustrasi gratis dan premium, Getillustrations menjadi pilihan ideal. Apapun platform yang kamu pilih, designers dapat yakin bahwa mereka memiliki akses ke resouces yang kaya untuk meningkatkan karya kreatifmu dan meraih visi desain ✨ Kalau kamu tertarik memperdalam skill dan pengetahuanmu dalam UI/UX, kami menyediakan kelas-kelas gratis UI/UX di BuildWithAngga lho! Keep the spirit of learning and Good luck ;)

Hello people with the spirit of learning! ✨ Di artikel kali ini, kita akan membahas tentang bagaimana kita bisa mendapatkan akses fitur-fitur Figma Premium tanpa perlu berlangganan mengeluarkan uang! Loh emang bisa? Bisa dong! Gimana sih caranya? Yuk simak artikel ini sampai habis ya~ Dapatkan Figma Premium Gratis dengan Figma for Eduacation! Figma for Education adalah program yang dibuat khusus oleh Figma untuk mendukung user/siswa dan pengajar di bidang pendidikan desain. Program ini memberikan akses gratis ke fitur premium Figma bagi institusi pendidikan, sehingga memungkinkan kamu dan pengajar untuk memanfaatkantools canggih tanpa biaya tambahan. Ini adalah cara Figma untuk memperkaya pengalaman belajar dan mengajar dengan teknologi desain terkini. Manfaat Figma for Education User Figma for Education memiliki begitu banyak manfaat bagi dunia pendidikan, di antaranya: Meningkatkan Keterampilan Desain: Kamu dapat mempelajari dasar-dasar desain UI/UX, prototyping, dan interaksi pengguna melalui platform yang mudah digunakan dan intuitif.Dorong Kolaborasi: Figma memungkinkan kolaborasi real-time antar siswa dan guru, memfasilitasi pembelajaran kooperatif dan memecahkan masalah bersama!Tingkatkan Pemahaman Konsep: Visualisasi dan prototyping dengan Figma membantu siswa memahami konsep abstrak dan kompleks.Kembangkan Kreativitas dan Inovasi: Figma memberikan ruang bagi pelajar untuk explore ide-ide kreatif mereka dan mengembangkan solusi inovatif untuk berbagai permasalahan.Menyiapkan Student untuk Masa Depan: Keterampilan desain UI/UX yang diasah melalui Figma for Education sangat disukai dan diminati di berbagai industri, mempersiapkan siswa untuk karier yang sukses di masa depan 🤩 Figma Basics in Figma Lalu Apa Saja Kelebihan dan Kekurangan Figma for Education? Figma for Education menawarkan beberapa kelebihan dibandingkan Figma biasa, yaitu: Akses Gratis atau Diskon: Siswa, guru, dan institusi pendidikan dapat menggunakan Figma secara gratis atau dengan harga yang lebih terjangkau.Fitur Tambahan untuk Pendidikan: Figma for Education dilengkapi dengan fitur-fitur khusus yang dirancang untuk mendukung kegiatan belajar mengajar, seperti… integrasi dengan Google Classroom dan kemampuan untuk membuat kelas virtual.Sumber Daya dan Dukungan: Figma menyediakan berbagai resourches dan support untuk membantu siswa dan guru/pendidik dalam menggunakan platform Figma, seperti tutorial, panduan, dan forum komunitas. Kekurangan Figma for Education Meskipun menawarkan banyak manfaat, Figma for Education juga memiliki beberapa kekurangan, yaitu: Ketergantungan pada Koneksi Internet: Figma adalah platform berbasis web, jadi sudah pasti memerlukan koneksi internet yang stabil untuk digunakan.Keterbatasan Fitur Tertentu: Beberapa fitur Figma mungkin tidak tersedia dalam versi Education, atau mungkin memiliki batasan tertentu. Bagaimana Cara Mendaftar Figma for Education? Buka Chrome lalu search “figma/education” Pilih “Get Verified” untuk masuk dan akses ke Figma for Education Masuk ke akun Figma, di sini aku pilih “Continue with Google” dan masukan akun Google-mu. Atau masukan e-mail yang terdaftar. Jika kamu belum memiliki akun Figma, kamu bisa klik “Create one” Setelah itu, kamu akan diarahkan untuk mengisi data dan formulir untuk mendapatkan Figma Education. Kamu bisa mengikuti data di atas seperti pilih As a Student, Tipe institusi saat ini, hingga rencana sampai kapan kamu akan menggunakan Figma for Education ini. Saranku, pilih Bulan dan Tahun yang paling lama yaa! ^^ Sukses! Akun Figma-mu sudah terdaftar sebagai Figma Education. Kamu bisa pilih “New Design File” untuk memulai journey-mu dengan Figma Education! 🤩 Sekarang kamu bisa menikmati fitur-fitur Figma Premium tanpa bayar! Contohnya seperti Mockup untuk berbagai macam Frame, bisa edit file teman/team, menambahkan lebih dari 3 Page dalam 1 file dan masih banyak fitur lainnya! Kamu juga bisa buat team seperti yang dimiliki Professional Plan loh ✨ Apa Lagi Sih Bedanya dengan Figma Biasa? Figma for Education dan Figma biasa (gratis) memiliki beberapa perbedaan: Akses Fitur Premium: Figma for Education memberikan kamu akses gratis ke fitur premium yang tidak tersedia pada akun Figma gratis biasa.Lisensi Pengguna: Figma for Education khusus untuk institusi pendidikan, sedangkan Figma biasa tersedia untuk umum tanpa verifikasi pendidikan atau lainnya.Dukungan Pembelajaran: Figma for Education memfasilitasi lebih banyak sumber daya edukasi dan dukungan komunitas yang dirancang untuk belajar. Prototype in Figma Dengan menyimak informasi dan mengikuti langkah-langkah di atas, kamu dapat dengan mudah mendaftar Figma for Education dan mulai memanfaatkan platform desain yang luar biasa ini untuk meningkatkan proses belajar mengajarmu dan mendorong kreatifitasmu di dunia pendidikan 🥰 Tertarik belajar UI/UX lebih dalam? Yuk gabung ke kelas-kelas gratis UI/UX BuildWithAngga dan asah *skill-*mu untuk menjadi seorang desainer profesional 🥰

Hello people with the spirit of learning! Memilih font yang tepat untuk desain UI/UX adalah hal yang krusial. Font yang tepat dapat meningkatkan estetika, membantu navigasi pengguna, dan menyampaikan pesan brand dengan efektif. Dalam dunia desain UI/UX, pemilihan font bukan sekadar estetika. Tahun 2024 menghadirkan tren font yang lebih fokus pada keseimbangan, modernitas, dan profesionalisme. Dalam artikel kali ini, kita akan membahas 3 kombinasi font terpopuler yang siap mendominasi desain UI/UX di tahun ini, beserta keunikan dan alasan kenapa kamu harus menggunakannya! Poppins x Lora Poppins: Font sans-serif modern dengan design yang clean dan mudah dibaca. Poppins sangat cocok untuk body text, headings, dan UI elements. Huruf-hurufnya yang tegas dan seimbang menjadikannya pilihan ideal loh guys! Desainnya yang sederhana namun elegan membuat teks jadi easy to read di berbagai ukuran layar. Lora: Font serif klasik dengan sentuhan modern ini cocok untuk judul, subheading, dan elemen yang ingin ditonjolkan. Lora memiliki keunikan pada kontrasnya yang tebal-tipis yang halus dan melengkung. Memberikan gaya klasik namun kontemporernya memberikan sentuhan keanggunan pada teks paragraf. Take a Look for the Original Design by Shaynakit.com Dengan menggabungkan Poppins dan Lora, maka desain akan menciptakan keseimbangan visual antara modernitas dan tradisional. Poppins memberikan kesan yang bersih dan profesional, sementara Lora menambahkan keanggunan dan kemudahan membaca pada teks panjang. Nunito x Karla Nunito: Font sans-serif geometris dengan nuansa yang ramah dan approachable. Font ini sangat cocok untuk body text, UI elements, dan microcopy. Font ini terkenal dengan lekukan halus dan proporsi seimbang. Bentuk hurufnya yang bulat dan ramah memberikan nuansa bersahabat dan nyaman pada teks loh guys Karla: Font sans-serif condensed dengan desain yang kokoh dan profesional ini cocok untuk headings, subheadings, dan elemen yang ingin ditonjolkan. Lora dengan gaya grotesque yang lebih kuat dan karakter tegas. Meskipun begitu, Karla tetap mempertahankan kemudahan membaca yang tinggi. Take a Look for the Original Design by Shaynakit.com Pada kombinasi ini, kita dapat menghadirkan kesan modern dan minimalis. Nunito memberikan kesan ramah dan mudah dibaca, dan Karla memberikan kesan kuat dan profesional. Perpaduan ini sangat cocok untuk website dan aplikasi yang ingin menampilkan kesan modern dan profesional, seperti website startup, website agensi, atau aplikasi fintech. Sangat ideal untuk desain yang ingin menyampaikan informasi dengan jelas dan tetap mempertahankan nuansa yang hangat dan menarik. Alice x Inter Alice: Font serif klasik dengan desain yang indah dan elegan. Font ini cocok untuk judul, subheading, dan elemen yang ingin ditonjolkan. Font ini memilki tipografi klasik dengan sentuhan modern. Gaya elegan dan detail halus pada huruf-hurufnya memberikan kesan mewah dan canggih pada teks. Kombinasi font ini menghadirkan kesan modern dan minimalis. Nunito memberikan kesan ramah dan mudah dibaca, sedangkan Karla memberikan kesan kuat dan profesional. Perpaduan ini cocok untuk website dan aplikasi yang ingin menampilkan kesan modern dan profesional, seperti website startup, website agensi, atau aplikasi fintech dan juga kombinasi ini ideal untuk *design-*mu yang ingin menyampaikan informasi dengan jelas dan tetap mempertahankan nuansa yang hangat dan menarik 🤩 Inter: Font sans-serif modern dengan desain yang netral dan bersih membuat font ini cocok untuk body text, UI elements, dan microcopy. Inter dirancang khusus untuk UI. Desainnya yang sederhana, namun kuat dengan spasi antar huruf yang optimal, membuatnya sangat mudah dibaca di berbagai ukuran layar dan resolusi. Take a Look for the Original Design by Shaynakit.com Kombinasi font Alice dan Inter ini menghadirkan perpaduan antara klasik dan modern. Alice memberikan sentuhan elegan dan berkelas, sedangkan Inter memberikan kesan modern dan mudah dibaca. Sehingga perpaduan ini cocok untuk website dan aplikasi yang ingin menampilkan kesan timeless dan profesional, seperti website brand fashion, website museum, atau aplikasi edukasi dan travel. Kombinasi ini sangat sesuai untuk desain yang ingin menonjolkan kualitas dan kepercayaan. Kesimpulan 💭 Memilih kombinasi font yang tepat untuk desain UI/UX-mu bukan hanya soal estetika loh guys, tapi juga tentang meningkatkan experience pengguna. Di tahun 2024 ini, menghadirkan tren font yang fokus pada keseimbangan, modernitas, dan profesionalisme. Dalam kombinasi font Poppins dan Lora, Nunito dan Karla, serta Alice dan Inter ini, mereka menawarkan perpaduan sempurna antara kejelasan, estetika, dan kenyamanan. Dengan memahami keunikan dan kelebihan masing-masing, kamu dapat menciptakan desain yang menarik, fungsional, dan memenuhi kebutuhan pengguna di tahun 2024 dan seterusnya. So, Selamat mencoba! Tertarik belajar tipografi dalam UI/UX lebih jauh? Yuk join kelas-kelas gratis UI/UX di buildwithangga! Asah skill-mu dan bangun portfolio berkualitas 🥰

Dalam desain antarmuka pengguna (UI) aplikasi mobile, setiap layar memiliki peran dan fungsi yang penting untuk memandu pengguna dalam pengalaman penggunaan aplikasi. Dari screen pembuka yang memikat hingga layout data yang terstruktur dengan baik, setiap elemen berkontribusi untuk menciptakan keseluruhan pengalaman yang memuaskan bagi pengguna 🤗 Mari kita telusuri beberapa jenis layar yang umum ditemui dalam aplikasi mobile: 1. Splash Screen https://dribbble.com/shots/23191263-Slash-Screen Splash screen adalah layar pertama yang muncul ketika pengguna membuka aplikasi. Biasanya berisi logo atau nama aplikasi dengan latar belakang yang menarik. Tujuan utamanya adalah memberikan kesan pertama yang kuat kepada pengguna dan memuat sumber daya awal yang diperlukan oleh aplikasimu! 2. Onboarding Screen https://dribbble.com/shots/23522720-Dating-onboarding-screen Onboarding screen hadir untuk membimbing pengguna melalui fitur dan fungsi dasar aplikasi. Ini sering kali berupa serangkaian slide atau tampilan yang menjelaskan keuntungan dan cara penggunaan aplikasi. Onboarding screen membantu pengguna untuk lebih memahami cara kerja aplikasi sebelum mereka mulai menggunakannya secara aktif. 3. Home screen https://shaynakit.com/details/mangan-online-food-delivery-home-screen Home screen adalah pusat navigasi utama dalam aplikasi. Ini menampilkan berbagai fitur dan konten yang tersedia, memungkinkan pengguna untuk dengan mudah mengakses bagian-bagian penting dari aplikasi. Home screen sering disesuaikan dengan preferensi pengguna atau menampilkan konten yang relevan berdasarkan aktivitas sebelumnya. 4. Profile Screen https://dribbble.com/shots/23938013-Mobile-App Profile screen memungkinkan pengguna untuk mengelola informasi pribadi mereka dan menyesuaikan pengaturan akun. Dan ini biasanya berisi foto profil, informasi kontak, dan opsi untuk mengubah kata sandi atau preferensi pengguna lainnya. Profile screen penting untuk memungkinkan pengguna merasa terhubung secara personal dengan aplikasi! 5. List Screen https://shaynakit.com/details/category-list-screen-task-management-app List screen menampilkan data dalam format yang terstruktur, seperti daftar item atau konten yang dapat diurutkan atau difilter. Ini memungkinkan pengguna untuk dengan mudah menavigasi dan mencari informasi yang mereka perlukan. List screen sering digunakan untuk menampilkan daftar teman, pesan, produk, atau entitas lainnya dalam aplikasi. 6. Detail Screen https://dribbble.com/shots/23547603-Maniro-Online-shop-Mobile-UI-Kit-Product-Detail Detail screen dalam UI aplikasi mobile adalah tampilan yang menyediakan informasi yang lebih rinci tentang item tertentu yang dipilih oleh pengguna dari daftar atau grid. Tujuan utama dari detail screen adalah untuk memberikan konteks dan detail tambahan tentang item yang sedang ditinjau, memungkinkan pengguna untuk mendapatkan pemahaman yang lebih mendalam atau melakukan tindakan tertentu. 7. Settings Screen https://dribbble.com/shots/17348595-Settings-App-UI-Design Settings screen adalah salah satu layar yang memungkinkan pengguna untuk menyesuaikan berbagai pengaturan dan preferensi sesuai dengan kebutuhan mereka. Layar ini memberikan kontrol kepada pengguna atas berbagai fitur dan fungsi dalam aplikasi, memungkinkan mereka untuk mengubah konfigurasi sesuai dengan preferensi pribadi atau kebutuhan tertentu. Kesimpulan Sebagai kesimpulan, desain UI aplikasi mobile memainkan peran kunci dalam menciptakan pengalaman pengguna yang memuaskan dan intuitif. Dari splash screen yang menarik perhatian, list screen yang memudahkan pengguna dalam menemukan informasi hingga settings screen yang memungkinkan user menyesuaikan pengaturan sesuai kebutuhan mereka. Setiap elemen layar memiliki tujuan dan kontribusi yang penting dalam membentuk keseluruhan pengalaman pengguna yang positif. Masih banyak lagi loh screens dalam suatu aplikasi mobile! Tertarik belajar UI/UX juga? Yuk gabung ke kelas-kelas UI/UX di BuildWithAngga! See you di kelas ya guys! 💫

Di era digital saat ini, peran kecerdasan buatan atau Artificial Intelligence (AI) semakin merasuk ke dalam berbagai bidang, termasuk desain antarmuka pengguna (UI) dan pengalaman pengguna (UX). Dengan kemampuan untuk menganalisis data, mengidentifikasi tren, dan bahkan memprediksi preferensi pengguna, software AI telah menjadi sekutu tak ternilai bagi para desainer UI/UX. Artikel ini kita akan menjelajahi peran penting software AI dalam membantu desainer menciptakan pengalaman pengguna yang menarik dan intuitif, serta mengungkapkan berbagai alat dan teknik yang tersedia untuk mendukung kreativitas dan efisiensi dalam proses desain! 🤗 1. FigGPT FigGPT adalah plugin yang didukung oleh kecerdasan buatan yang dirancang untuk meningkatkan alur kerja dan produktivitas pengguna di Figma, aplikasi perangkat lunak desain yang banyak digunakan. Dengan mengintegrasikan teknologi ChatGPT secara mulus ke dalam Figma, FigGPT memberdayakan desainer untuk menulis dan mengedit teks dengan mudah dan efisien. Ada pun beberapa keunggulan FigGPT seperti: Summarization: Cepat meringkas teks di dalam Figma untuk pemahaman konten yang efisien,Style Changing: Mudah mengubah gaya teks, termasuk font, ukuran, dan warna, di dalam desain Figma,Idea Generation: Hasilkan berbagai ide kreatif untuk konsep desain atau penulisan teks,Komposisi Teks: Menyusun teks langsung di dalam Figma menggunakan kemampuan kecerdasan buatan FigGPT,Component Population: Populasi komponen dengan data contoh untuk membuat mockup desain yang realistis,User-Friendly: Dirancang untuk kemudahan penggunaan oleh desainer dengan semua tingkat keterampilan,Free dan dapat diakses secara online via Chrome 2. Framer Framer adalah software desain yang juga memanfaatkan teknologi AI. Dengan Framer, kamu dapat membuat prototipe interaktif dengan cepat dan mudah. Software ini memungkinkan kamu untuk menguji interaksi pengguna, animasi, dan alur kerja produk. Dengan bantuan AI, kita dapat mengoptimalkan prototipe kita dan mendapatkan wawasan yang worth-it tentang bagaimana pengguna berinteraksi dengan desainmu. Framer mampu: Auto-Code: Software AI satu ini mampu menghasilkan kode secara otomatis berdasarkan desain yang dibuat oleh pengguna. Framer mampu mengenali pola dalam desain dan memberikan kode yang sesuai, sehingga mempercepat proses pengembangan prototipe dan mengurangi kesalahan manusia dalam penulisan kode.Auto-Animate: Fitur ini menggunakan AI untuk menghasilkan animasi yang mulus dan responsif. Software ini akan secara otomatis menganalisis perubahan setiap halaman atau elemen desain, dan menghasilkan animasi yang tepat untuk transisi antara perubahan tersebut.Komponen Siap Pakai: Framer menyediakan komponen siap pakai dan template yang memudahkan desainer untuk membuat prototipe. Ini mempercepat proses prototyping dan memungkinkan desainer untuk fokus pada ide kreatif mereka.Framer yang diakses secara free memiliki batasan fitur. Berbeda dengan Framer berbayar yang memiliki akses fitur lebih luas.Dapat diakses dengan Chrome 3. Recraft Recraft adalah platform kecerdasan buatan yang generatif yang memungkinkan pengguna untuk membuat gambar vektor dan seni berkualitas tinggi menggunakan bantuan bahasa sederhana. Ini dioptimalkan untuk desainer digital, pemasar, seniman, dan kreatif lainnya. Ada pun keunggulan Recraft yaitu: Gambar Vector: Recraft menghasilkan gambar vektor SVG yang tidak tergantung resolusi sehingga dapat diubah ukurannya tanpa kehilangan kualitas, cocok digunakan untuk desain digital maupun cetak.Pemrosesan Bahasa Alami: NLP canggih dari Recraft memungkinkan kamu menggunakan instruksi bahasa alami dan mendapatkan hasil berkualitas tinggi dengan cepat, tanpa perlu mengatur parameter secara manual.Pergeseran Gaya: Mudah menjelajahi variasi dengan beralih antara gaya seni yang berbeda seperti realisme, kartun, seni pixel, dan lainnya.Palet Warna: Gunakan palet warna merek atau buat palet kamu sendiri untuk mendapatkan gambar dengan warna yang konsisten dan tepat.Dapat diakses secara online via Chrome 4. UIzard UIzard adalah software AI yang mengintegrasikan machine learning untuk membantu kamu para UI/UX designers membuat dan menghasilkan prototipe dengan cepat dan effective. Dengan AI ini, kamu dapat menggambarkan interface penggunamu dengan satu kali klik. Ini menghasilkan kode front-end yang siap digunakan dan berbasis pada desain yang kamu buat, menghemat waktu dan upaya. Selain itu, UIzard mampu mengenali elemen-elemen desain dan mengoptimalkan layout, memungkinkan kamu sebagai desainer untuk fokus pada kreativitasmu. Lalu apa saja sih keunggulan UIzard? Bisa membuat design website tanpa codingUIzard memberikan/menyediakan beberapa pilihan jenis design web seusai kebutuhan desainerIntegrasi dengan CMS: Design web dapat diintegrasikan dengan beberapa CMS (Content Management System), contohnya seperti WordPress, Shopify, dan lain sebagainya.Kolaborasi dengan tim: Kamu dapat mengundang timmu untuk berkolaborasi dalam membuat design menggunakan Uizard.io. Uizard punya fitur yang memungkinkan beberapa partner kerja kalian untuk bekerja pada desain website yang sama secara bersamaan.UIzard bisa diakses secara free namun untuk beberapa fitur memang harus harus berbayar,Mudah diakses melalui Chrome. 5. Fontjoy Fontjoy memanfaatkan kekuatan pembelajaran mendalam untuk membantu kamu dalam pencarian kombinasi font yang ideal. Ini mengevaluasi dan menghasilkan pasangan font, menawarkan pilihan yang menyatu secara mulus. Tool canggih ini membawa keseimbangan dan kontras ke desainmu, memastikan bahwa font-font tersebut saling melengkapi. Keunggulan Fontjoy: User-friendly: Dengan kemampuan pembelajaran mendalamnya, antarmuka ini mudah digunakan, memberikan hasil yang cepat dan efektif.Menghemat Waktu: Fontjoy membantu kamu membuat keputusan tentang penyatuan font dengan cepat sehingga kamu dapat menghabiskan lebih banyak waktu pada aspek-aspek lain dari desainmu.Pilihan font yang Beragam: Dengan koleksi font yang luas, Anda memiliki spektrum yang luas untuk dipilih. Kesimpulan Software AI seperti FigGPT, Framer, Recraft, UIzard, dan Fontjoy Insight telah membawa perubahan yang signifikan. Mereka tidak hanya mempermudah tugas para desainer, tetapi juga membantu dalam menciptakan pengalaman pengguna yang lebih baik: FigGPT meningkatkan alur kerja dan produktivitas pengguna dengan integralisasi ChatGPT,Framer memungkinkan pembuatan prototipe yang interaktif,Recraft membuat gambar vektor dan seni berkualitas tinggi,UIzard menghasilkan prototipe dengan cepat, danFontjoy membantu mempermudah menemukan kombinasi font yang menarik. Dengan teknologi AI semakin terlibat dalam workflow UI/UX, para desainer memiliki alat yang kuat untuk mencapai hasil terbaik dan meningkatkan kualitas desainmu. Tertarik belajar lebih dalam? Kamu bisa mulai di kelas-kelas UI/UX BuildWithAngga loh sebagai langkah awal! Tertarik coba? 😉

Hello people with the spirit of learning! ✨ Peran desainer antarmuka pengguna (UI) dan pengalaman pengguna (UX) semakin penting dalam memastikan pengalaman pengguna yang optimal dalam penggunaan produk dan layanan digital. Untuk mendukung kreativitas dan efisiensi para desainer UI/UX, plugins telah menjadi alat yang tak tergantikan dalam proses desain. Di tahun 2024 ini, dengan teknologi terus berkembang, terdapat beragam plugins yang menjadi favorit di kalangan para desainer. Artikel ini akan menjelajahi lima plugins andalan di 2024 yang memberikan kemudahan, efisiensi, dan inovasi bagi para desainer UI/UX dalam menciptakan pengalaman pengguna yang menarik dan memikat! 🤩 AutoHTML AutoHTML adalah plugin yang memungkinkan desainer untuk mengonversi desain Figma langsung menjadi kode HTML yang dapat digunakan untuk pengembangan web. Kelebihan utama dari plugin ini adalah: Kemudahan Penggunaan: Figma AutoHTML memungkinkan desainer untuk dengan cepat menghasilkan kode HTML dari desain mereka tanpa harus meninggalkan lingkungan desain Figma, sehingga mempercepat proses developer.Presisi: Plugin ini mencoba untuk menghasilkan kode HTML yang sesuai dengan desain asli secara akurat loh guys! Mengurangi waktu yang dibutuhkan untuk menyesuaikan kode secara manual!Keterhubungan: Karena plugin terintegrasi langsung dengan Figma, desainer dapat dengan mudah mengubah desain dan menghasilkan kode HTML yang diperbarui secara otomatis. Namun, seperti kebanyakan teknologi, Figma AutoHTML juga memiliki kekurangan: Keterbatasan dalam Kompleksitas: Plugin ini mungkin tidak cocok untuk desain yang sangat kompleks atau interaktif, karena fungsionalitasnya mungkin terbatas dalam menghasilkan kode untuk desain yang rumit.Kode yang Dihasilkan Mungkin Memerlukan Penyesuaian: Meskipun plugin ini berusaha menghasilkan kode yang akurat, hasilnya mungkin memerlukan penyesuaian manual tambahan untuk mencapai kualitas dan performa yang optimal.Ketergantungan pada Plugin: Desainer harus menyadari bahwa penggunaan plugin ini dapat menciptakan ketergantungan terhadap alat tersebut, sehingga memperhatikan kemungkinan perubahan atau dukungan yang berkurang dari pengembang. Meskipun demikian, AutoHTML tetap menjadi pilihan yang menarik bagi desainer UI/UX yang ingin menghasilkan kode HTML dengan cepat dan efisien dari desain mereka di Figma. RemoveBG Plugin Figma RemoveBG adalah alat yang memungkinkan pengguna untuk dengan mudah menghapus latar belakang gambamur secara otomatis di dalam aplikasi desain Figma. Kelebihan Plugin RemoveBG: Kemudahan Penggunaan: Figma RemoveBG menawarkan antarmuka yang sederhana dan mudah digunakan, yang memungkinkan pengguna untuk menghapus latar belakang gambar hanya dengan beberapa klik mouse.Efisiensi: Dibandingkan dengan metode manual yang memakan waktu, plugin ini memungkinkan pengguna untuk menghapus latar belakang gambar dengan cepat dan efisien, meningkatkan produktivitas dalam proses desain.Integrasi Langsung: Plugin ini terintegrasi langsung dengan Figma, sehingga pengguna dapat langsung menghapus latar belakang gambar tanpa harus meninggalkan lingkungan desain. Adapun kekurangan antara lain: Kualitas Hasil: Meskipun secara umum plugin ini menghasilkan hasil yang baik dalam menghapus latar belakang gambar, kualitasnya mungkin tidak selalu sempurna, terutama untuk gambar yang kompleks atau dengan detail halus.Keterbatasan Kontrol: Pengguna mungkin mengalami keterbatasan dalam mengontrol proses penghapusan latar belakang, terutama jika ingin menyesuaikan beberapa bagian dari gambar secara manual.Ketergantungan pada Teknologi: Plugin ini bergantung pada teknologi pengenalan gambar, sehingga kualitas dan keandalannya dapat dipengaruhi oleh perkembangan dalam teknologi tersebut serta kualitas gambar yang diinputkan. Meskipun demikian, Figma RemoveBG tetap menjadi alat yang berguna bagi kamu yang ingin dengan cepat menghapus latar belakang gambar dalam proses desain mereka di Figma. Kelebihannya dalam hal kemudahan penggunaan dan efisiensi membuatnya menjadi pilihan yang populer di kalangan desainer. Namun, pengguna harus juga mempertimbangkan kekurangannya dan memastikan bahwa hasil yang dihasilkan sesuai dengan kebutuhan desain mereka. Relume Ipsum Relume Ipsum adalah plugin yang memungkinkan pengguna untuk dengan mudah menambahkan teks dummy (lorem ipsum) ke desain mereka di Figma. Berikut adalah beberapa kelebihan dan kekurangan dari plugin ini: Kelebihan Relume Ipsum: Kemudahan Penggunaan: Figma Relume Ipsum menyediakan antarmuka yang sederhana dan mudah digunakan, memungkinkan kamu untuk dengan cepat menambahkan teks dummy ke desain mereka tanpa harus meninggalkan lingkungan Figma.Fleksibilitas: Plugin ini memungkinkan pengguna untuk menyesuaikan jumlah kata atau paragraf, jenis teks dummy (lorem ipsum atau teks lain), serta gaya dan format teks sesuai kebutuhan desain mereka.Efisiensi: Dengan menggunakan Figma Relume Ipsum, pengguna dapat menghemat waktu yang sebelumnya dibutuhkan untuk menyalin dan menempel teks dummy secara manual ke desain mereka. Ini memungkinkan fokus yang lebih besar pada aspek visual dan fungsional desain. Kekurangan: Ketergantungan pada Teks Dummy: Meskipun teks dummy berguna untuk mengisi konten placeholder, pengguna harus ingat bahwa teks sejati akan memiliki panjang, format, dan gaya yang berbeda. Oleh karena itu, pengguna perlu menggantikan teks dummy dengan konten yang sesungguhnya setelah desain selesai.Keterbatasan Kreativitas: Penggunaan teks dummy dapat mengarah pada kecenderungan untuk fokus pada aspek visual desain tanpa mempertimbangkan secara menyeluruh konten sebenarnya. Hal ini bisa mengurangi kualitas pengalaman pengguna akhir jika konten sebenarnya tidak dipertimbangkan dengan baik.Kustomisasi Terbatas: Meskipun plugin ini memungkinkan beberapa tingkat kustomisasi, seperti jumlah kata atau paragraf, pengguna mungkin merasa terbatas dalam hal format atau variasi teks dummy yang dapat mereka gunakan. Secara keseluruhan, Figma Relume Ipsum adalah plugin yang berguna bagi desainer untuk menambahkan teks dummy ke desain mereka di Figma dengan cepat dan mudah. Namun, pengguna harus mengingat keterbatasan dan pertimbangan yang terkait dengan penggunaan teks dummy dalam proses desain mereka. UI Table Builder Figma UI Table Builder adalah plugin yang memungkinkan user untuk dengan mudah membuat tabel UI di Figma tanpa perlu menggunakan penjelajah web eksternal atau alat desain lainnya. Ada pun kelebihan UI Table Builder antara lain: Kemudahan Penggunaan: Plugin ini menyediakan interface yang intuitif dan mudah digunakan, memungkinkan pengguna untuk dengan cepat membuat tabel UI langsung di dalam lingkungan Figma tanpa harus bergantung pada alat eksternal.Fleksibilitas: Figma UI Table Builder memberikan banyak opsi konfigurasi, seperti jumlah baris dan kolom, gaya sel, dan format data, sehingga pengguna dapat dengan mudah menyesuaikan tampilan tabel sesuai dengan kebutuhan desain mereka.Interaktivitas: Plugin ini memungkinkan kamu untuk menambah, menghapus, atau mengubah sel tabel secara langsung di dalam Figma, sehingga memudahkan proses eksperimen dan iterasi desain. Meskipun begitu, plugin ini memiliki kekurangan yaitu: Keterbatasan Fungsionalitas: UI Table Builder dapat membuat tabel dasar dengan mudah, fungsionalitasnya mungkin terbatas untuk membuat tabel yang sangat kompleks atau interaktif. Pengguna mungkin perlu mencari plugin tambahan atau solusi lain untuk kebutuhan yang lebih spesifik.Ketergantungan pada Plugin: Pengguna harus menyadari bahwa mereka bergantung pada dukungan dan pemeliharaan dari pengembang plugin. Jika tidak ada pembaruan atau perbaikan yang disediakan, pengguna mungkin mengalami kendala di masa depan.Keterbatasan Kustomisasi: Meskipun plugin ini menyediakan beberapa tingkat kustomisasi, seperti gaya visual dan format data, pengguna mungkin merasa terbatas dalam hal variasi desain atau fitur tambahan yang dapat mereka terapkan pada tabel. Secara keseluruhan, UI Table Builder adalah plugin yang berguna bagi desainer untuk membuat tabel UI dengan cepat dan mudah di dalam Figma. Namun, pengguna harus mempertimbangkan kelebihan dan kekurangan plugin ini sebelum mengandalkannya sepenuhnya untuk kebutuhan desain mereka. Feather Icons Nah Feather Icons adalah plugin yang memungkinkan pengguna untuk dengan mudah mengakses dan menggunakan ikon dari kumpulan ikon Feather langsung di dalam Figma yang sangat beragam! 🤩 Yuk simak kelebihan plugin ini! Kelebihan: Akses Mudah ke Ikon: Figma Feather Icons menyediakan akses langsung ke kumpulan ikon Feather, yang merupakan kumpulan ikon yang populer dan sering digunakan dalam desain UI/UX. Pengguna dapat dengan cepat menelusuri dan memilih ikon yang sesuai dengan kebutuhan desain mereka.Kemudahan Penggunaan: Plugin ini menawarkan interface yang intuitif dan mudah digunakan, sehingga pengguna dapat dengan cepat menambahkan ikon ke desain mereka tanpa harus meninggalkan lingkungan Figma. Prosesnya sederhana: cukup cari ikon yang diinginkan, pilih, dan tambahkan ke desain.Kustomisasi: Meskipun ikon Feather telah dirancang dengan gaya visual yang konsisten, pengguna masih dapat menyesuaikan warna dan ukuran ikon sesuai dengan kebutuhan desain mereka, memberikan fleksibilitas dalam penggunaan ikon. Kekurangan: Keterbatasan Pilihan: Meskipun koleksi ikon Feather cukup luas, tetapi mungkin tidak mencakup semua jenis ikon yang dibutuhkan oleh pengguna. Ini bisa menjadi keterbatasan terutama jika kamu memerlukan ikon khusus yang tidak tersedia dalam koleksi.Ketergantungan pada Plugin dan Sumber Eksternal: Pengguna harus menyadari bahwa mereka bergantung pada plugin dan sumber eksternal (seperti penyedia ikon Feather) untuk mengakses koleksi ikon ini**. Jika plugin tidak diperbarui atau koleksi ikon tidak lagi tersedia, pengguna mungkin mengalami kesulitan dalam mengakses ikon yang diinginkan.**Keterbatasan Kustomisasi: Meskipun ikon Feather dapat ditambahkan ke desain dengan mudah, pengguna mungkin merasa terbatas dalam hal kustomisasi. Mereka mungkin perlu melakukan modifikasi tambahan di dalam Figma untuk mencapai tampilan atau gaya tertentu yang diinginkan. Secara keseluruhan, Figma Feather Icons adalah plugin yang berguna bagi desainer untuk menambahkan ikon dengan cepat dan mudah ke desain mereka di dalam Figma. Namun, pengguna harus mempertimbangkan kelebihan dan kekurangan plugin ini sesuai dengan kebutuhan desain mereka sebelum menggunakannya secara luas. Kesimpulan Dalam artikel ini, telah dibahas beberapa plugin populer untuk desainer UI/UX di Figma, yang meliputi Figma AutoHTML, Figma Arc, Figma Relume Ipsum, Figma UI Table Builder, Figma RemoveBG dan Figma Feather Icons. Kelebihan plugin Figma AutoHTML meliputi kemudahan penggunaan, presisi dalam menghasilkan kode HTML, dan keterhubungan langsung dengan lingkungan Figma. Namun, kekurangannya adalah keterbatasan dalam menangani desain yang kompleks dan ketergantungan pada plugin. Figma Arc menawarkan kemudahan penggunaan, fleksibilitas dalam kustomisasi, dan interaktivitas dalam mengubah nilai data, tetapi keterbatasannya terletak pada kompleksitas fungsionalitas dan ketergantungan pada pengembang. Figma Relume Ipsum menyediakan kemudahan dalam menambahkan teks dummy ke desain, tetapi juga memiliki ketergantungan pada teks dummy dan potensi pengurangan kreativitas. Figma UI Table Builder memungkinkan pembuatan tabel UI dengan cepat dan efisien, namun mungkin memiliki keterbatasan dalam fungsionalitas dan kustomisasi. Figma RemoveBG memiliki fitur hapus background secara instant menggunakan AI, mempermudah pengerjaan kamu untuk kebutuhan image. Namun yang perlu diperhatikan juga adalah selain plugin ini memungkinkan pengguna untuk menghapus latar belakang gambar dengan cepat, kamu bisa saja mengalami keterbatasan dalam mengontrol proses penghapusan latar belakang, Terakhir, Figma Feather Icons memberikan akses mudah ke koleksi ikon, integrasi langsung dengan Figma, dan kemudahan penggunaan, tetapi memiliki keterbatasan dalam pilihan ikon, ketergantungan pada plugin, dan keterbatasan kustomisasi. Dengan demikian, meskipun setiap plugin menawarkan keunggulan yang unik, pengguna perlu mempertimbangkan kelebihan dan kekurangannya sebelum memutuskan plugin mana yang paling sesuai dengan kebutuhan desainmu. Nah guys, kalau kalian tertarik untuk memperdalam skill kalian dalam dunia UI/UX design, BuildWithAngga menyediakan kelas-kelas pembelajaran dengan mentor expert dan memiliki berbagai kelas gratis bersertifikat jika kamu upgrade ke Premium. Tunggu apa lagi? See you di kelas ya! ;D