Tips All

Halo semua. Untuk tutorial kali ini, kita akan melanjuti membuat aplikasi booking tiket film. Halaman yang akan dibuat ada dua yaitu halaman choose seat dan halaman confirmation. Halaman choose seat adalah halaman di mana saat user sudah menentukan film dan jadwal, akan diarahkan ke halaman ini untuk memilih tempat duduk mana yang dituju. Sedangkan halaman confirmation merupakan halaman yang isinya berupa review pesanan tiket dilengkapi dengan harga, kemudian ada form data untuk pemesan isi, dan pilihan metode pembayaran. Dalam mendesain ini kita akan menggunakan fitur dari Figma yaitu auto layout. Tunggu apa lagi, ayo kita mulai desain Membuka Figma Pertama sebelum kita ngedesain, perlunya kita membuka software Figma. Kemudian pilih + Create new, untuk membuat file design baru. Halaman Choose Seat 1. Memilih frame Oke untuk halaman pertama kita akan membuat halaman choose seat dimulai dengan pemilihan 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 Kita akan memulai dari membuat komponen header. Di header ini kita akan membuat back button yang dilengkapi oleh informasi singkat tentang pemilihan film, tempat, dan tanggalnya. Untuk membuat header, berikut langkahnya: Buatlah lingkaran menggunakan tools ellips (menekan huruf “O” pada keyboard). Beri ukuran 48 px. Beri warna stroke #13181D dengan ketebalan 1.5px.Masukkan ikon left arrow tipe outline dari Iconsax ukuran 24px.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. Back button sudah jadiBuat teks “Deadpool & Wolverine” = Poppins, 14, semibold, warna #13181DBuat teks “Kelapa Gading Tckt ● Studio 1” = Poppins, 12, regular, warna #13181D, letakkan di bawah teks “Deadpool & Wolverine”Select kedua teks lalu jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: leftVertical gap between items: 4Rename object menjadi “Movie info” pada layer panel di sebelah kiriBuat teks “24 Jul” = Poppins, 12, regular, warna #13181DBuat teks “12:00” = Poppins 12, semibold, warna #13181D, letakkan di bawah teks “24 Jul”Select kedua teks lalu jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerVertical gap between items: 0Rename object menjadi “Date” pada layer panel di sebelah kiri Select movie info, letakkan di sebelah kanan back buttonSelect back button dan movie info jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: leftHorizontal gap between items: 12Rename object menjadi “back button+movie info” pada layer panel di sebelah kiriSelect date letakkan di sebelah kanan back button+movie infoSelect date dan back button+movie info jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal gap between items: autoResize object width: 358px, height: 48px Kompone header sudah jadi. Header ini akan menjadi elemen penting yang memberikan navigasi dan identitas bagi pengguna. Sekarang, kita akan melanjutkan ke langkah berikutnya, yaitu membuat komponen seat status. 3. Membuat seat status Seat status ini akan menunjukkan arti dari berbagai warna atau ikon yang digunakan untuk menunjukkan status tempat duduk. Berikut langkah pembuatannya: Buat rectangle menggunakan shape tools di figma (menekan huruf “R” pada keyboard) dengan ukuran 20px, dan beri warna #F7E3D5Buat teks “Available” = Poppins, 12, regular, warna #13181D, letakkan di samping kanan rectangleSelect rectangle dan teks **“Available” jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftHorizontal gap between items: 8Rename object menjadi “Available” pada layer panel di sebelah kiriDuplikat **Available ****(Ctrl+D pada keyboard) dua kali, dan rename menjadi “Taken” dan “On hold”, dan ubahlah opsi:Untuk layer Taken, ganti teksnya “Taken” = Poppins, 12, regular, warna #13181D, dan ganti warna rectangle menjadi #A7724DUntuk layer On hold, ganti teksnya “On hold” = Poppins, 12, regular, warna #13181D, dan ganti warna rectangle menjadi #F7A368Untuk posisi pertama letakkan **Available ****kemudian samping kanan letakkan Taken kemdian samping kanan letakkan On Hold sesuai dengan gambar di atasSelect Available, Taken, dan On hold jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: middleHorizontal gap between items: autoResize width: 358px, height: 20 Komponen seat status. Sekarang, mari lanjutkan ke langkah berikutnya, yaitu membuat seats area yang menunjukkan tata letak tempat duduk. 4. Membuat desain container seats area Seats area akan menampilkan tata letak tempat duduk secara visual, memungkinkan pengguna untuk melihat dan memilih tempat duduk yang tersedia. Pertama kita akan membuat layar screen terlebih dahulu, berikut langkahnya: Buat teks “Screen” = Poppins, 16, regular, warna #F97316Select teks “Screen” jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Horizontal padding: 8pxVertical padding: 8pxBeri warna fill #FEEFE4Rezize width: 358px, height: 32pxCorner radius: 10 Berikut kita akan membuat seats, berikut langkahnya: Buat rectangle menggunakan shape tools di figma (menekan huruf “R” pada keyboard) dengan ukuran 31px, corner radius 10px dan beri warna bebas namun sesuai dengan warna pada status seatDuplikat rectangle (Ctrl+D pada keyboard) tiga kali, dan beri warna bebas namun sesuai dengan warna pada status seat. Kemudian rectangle di sebelah kanan sehingga membentuk kolom/barisan yang rapi. Pastikan jarak antar rectangle konsisten dan sesuai dengan layout yang diinginkan.Select semua rectangle jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: leftHorizontal gap between items: 16Duplikat object (Ctrl+D pada keyboard) dan hapus satu rectangle sehingga ada tiga.Select keduanya jadikan auto layout (Shift+A pada keyboard)** lalu ubah opsi:Align: centerHorizontal gap between items: autoRezize width: 358px, height: 31px Select object kemudian duplikat object (Ctrl+D pada keyboard) sebanyak enam kali ke bawah, dan beri warna bebas namun sesuai dengan warna pada status seat.Select semuanya jadikan auto layout (Shift+A pada keyboard)** lalu ubah opsi:Vertical gap between items: 16 Select seats dan posisikan di bawah screenSelect screen dan seats jadikan auto layout (Shift+A pada keyboard)** lalu ubah opsi:Vertical gap between items: 66 Komponen seats area selesai. Selanjutnya, kita lanjutkan ke langkah berikutnya, yaitu membuat komponen price review. 5. Membuat desain container price review Komponen berikutnya membuat price review. Menampilkan ringkasan harga berdasarkan pilihan tempat duduk yang telah dipilih pengguna. Dengan adanya ulasan harga, pengguna dapat melihat total biaya secara transparan sebelum user klik button yang akan melanjutkan ke proses pembayaran. Untuk membuatnya berikut langkahnya: Buat teks “Seat Number” = Poppins, 16, regular, warna #13181DBuat teks “G7, G8” = Poppins 16, semibold, warna #13181D, letakkan di bawah teks “Seat Number”Select kedua teks jadikan auto layout (Shift+A pada keyboard)** lalu ubah opsi:Align: top leftHorizontal gap between items: 8Rename object menjadi “seat number” pada layer panel di sebelah kiriBuat teks “Price” = Poppins, 16, regular, warna #13181DBuat teks “Rp 100,000” = Poppins 16, semibold, warna #13181D, letakkan di bawah teks “Seat Number”Select kedua teks jadikan auto layout (Shift+A pada keyboard)** lalu ubah opsi:Align: top rightHorizontal gap between items: 8Rename object menjadi “price” pada layer panel di sebelah kiri Select price, letakkan di samping kanan seat numberSelect **seat number ****dan **price jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerHorizontal gap between items: autoRezize width: 358px, height: 44pxRename object menjadi “overview” pada layer panel di sebelah kiriUntuk button, buat teks “Book Ticket” = Poppins, 18, semibold, warna #13181DSelect teks jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal padding: 12pxVertical padding: 18pxCorner radius: 20pxRezize width: 358px, height: 56px Select button letakkan di bawah overviewSelect overview dan button jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerVertical gap between items: 16pxLeft, top, right padding: 16pxBottom padding: 21pxBeri warna fill #FFFFFF Komponen price review sudah selesai dibuat. Sekarang, langkah selanjutnya adalah menyusun semua komponen yang telah dibuat—header, seat status, seats area, dan price review—dalam satu tampilan yang terintegrasi. 6. Menyusun desain-desain komponen Setelah komponen-komponen sudah dibuat, waktunya menyusun komponen-komponen menjadi suatu page. Bisa diikuti dari gambar di atas. Halaman confirmation 1. Memilih frame Oke untuk halaman pertama kita akan membuat halaman choose seat dimulai dengan pemilihan 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 Pada halaman iuni akan dimulai dengan pembuatan komponen header. Header adalah elemen penting yang akan menyediakan navigasi dan identitas utama untuk aplikasi kita. Di header ini kita akan membuat back button yang dilengkapi oleh teks “Confirmation” Buatlah lingkaran menggunakan tools ellips (menekan huruf “O” pada keyboard). Beri ukuran 48 px. Beri warna stroke #13181D dengan ketebalan 1.5px.Masukkan ikon left arrow tipe outline dari Iconsax ukuran 24px.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. Back button sudah jadiBuat teks “Confirmation” = Poppins, 16, bold, warna #13181D, letakkan di samping kanan back buttonSelect kedua object jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal gap between items: autoRezize width: 235px, height: 48px Pembuatan komponen header selesai. Selanjutnya, mari kita lanjutkan ke langkah berikutnya, yaitu membuat komponen movie preview. 3. Membuat desain container movie preview Komponen ini akan menampilkan informasi mengenai film apa yang ditonton, tempat theatre, tanggal dan waktu yang dipilih Berikut langkahnya: Buat teks “Deadpool & Wolverine” = Poppins, 14, bold, warna #13181DBuat teks “Kelapa Gading Tckt ● Studio 1” = Poppins, 12, regular, warna #13181D letakkan di bawah teks “Deadpool & Wolverine”Select kedua teks jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: top leftVertical gap between items: 4Rename object menjadi “movie details” pada layer panel di sebelah kiriBuat teks “Tuesday 24th July 2024” = Poppins, 12, regular, warna #13181DBuat teks “12:00” = Poppins, 12, regular, warna #13181D letakkan di bawah teks “Tuesday 24th July 2024”Select kedua teks jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: top leftVertical gap between items: 4Rename object menjadi “date details” pada layer panel di sebelah kiriSelect **date details ****di bawah movie detailsSelect keduanya jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: top leftVertical gap between items: 8Rename object menjadi “information” pada layer panel di sebelah kiri Letakkan poster film Deadpool & Wolverine dengan size width: 78px, dan height: 116px. Beri corner radius: 5pxLetakkan information di samping kanan posterSelect keduanya jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: leftHorizontal gap between items: 16Rezize width: 358px, height: 148pxCorner radius: 20px Komponen movie preview telah selesai dibuat. Selanjutnya, kita akan fokus pada pembuatan komponen quantity tickets. 4. Membuat desain container quantity tickets Komponen quantity tickets akan menunjukkan berapa tiket yang dibeli dan dilengkapi input field untuk voucher, harga total jumlah tiket, dan harga administrasi. Berikut langkahnya: Buat teks “Quantity Ticket” = Poppins, 14, bold, warna #13181DBuat teks “2x” = Poppins, 16, medium, warna #FFFFFFBuat rectangle menggunakan shape tools di figma (menekan huruf “R” pada keyboard) dengan ukuran 40px, corner radius 10px, beri warna fill #F97316Select teks “2x” dan rectangle beri align horizontal centers dan align vertical centers dan kedua object tekan Ctrl+G pada keyboard untuk digabungkan menjadi satu. Rename object menjadi “2x” pada layer panel di sebelah kiriBuat teks “Seat Number” = Poppins, 12, regular, warna #13181DBuat teks “G7, G8” = Poppins, 12, semibold, warna #13181D, letakkan di bawah teks “Seat Number”Select teks “Seat Number” dan “G7, G8” jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 0Rename object menjadi “seat number” pada layer panel di sebelah kiriSelect seat number letakkan di samping kanan 2xSelect 2x dan seat number jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftHorizontal gap between items: 8Rename object menjadi “quantity seats” pada layer panel di sebelah kiri Buat teks “Price” = Poppins, 12, regular, warna #13181DBuat teks “2 x Rp 50,000” = Poppins, 12, semibold, warna #13181D, letakkan di bawah teks “Price”Select teks “Price” dan “2 x Rp 50,000” jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top rightVertical gap between items: 0Rename object menjadi “price” pada layer panel di sebelah kiriSelect quantity seats dan price jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerHorizontal gap between items: autoRezize width: 358px, height: 40pxRename object menjadi “quantity seats+price” pada layer panel di sebelah kiri Select dan quantity seats+price letakkan di bawah teks “Quantity Ticket”Select teks “Quantity Ticket” dan quantity seats+price jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 16Rename object menjadi “ticket price” pada layer panel di sebelah kiri Untuk input field yang berupa tempat mengisi voucher berikut langkahnya: Masukkan ikon voucher tipe outline dari Iconsax ukuran 24px. Beri warna #B2B5BABuat teks “Apply voucher here” = Poppins, Regular, 14, warna #B2B5BA kemudian letakan di samping kanan ikon voucherSelect teks “Apply voucher here” dan ikon voucher dan jadikan ke auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: leftGap between items: 12pxRename object menjadi “voucher” pada layer panel di sebelah kiriMasukkan ikon right arrow tipe outline dari Iconsax ukuran 24px. Beri warna #13181D. Letakkan di samping kanan voucherSelect voucher dan ikon right arrow jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerHorizontal gap between items: autoHorizontal padding: 14pxVertical padding: 16pxRezize search bar dengan width: 358px, height: 56px, dan ubah corner radius: 20Beri warna fill #E8E8E8Rename object menjadi “voucher bar” pada layer panel di sebelah kiri Buat teks “Price” = Poppins, 12, semibold, warna #13181DBuat teks “Rp 100,000” = Poppins, 12, semibold, warna #13181D, letakkan di samping kanan teks “Price”Select kedua teks ****jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerVertical gap between items: autoRezize width: 358px, height: 20pxRename object menjadi “price” pada layer panel di sebelah kiriBuat teks “Admin Fee” = Poppins, 12, semibold, warna #13181DBuat teks “Rp 3,000” = Poppins, 12, semibold, warna #13181D, letakkan di samping kanan teks “Admin Fee”Select kedua teks ****jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerVertical gap between items: autoRezize width: 358px, height: 20pxRename object menjadi “admin fee” pada layer panel di sebelah kiriSelect admin fee, letakkan di bawah priceSelect price dan admin fee jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 8Rename object menjadi “price+admin fee” pada layer panel di sebelah kiri Select voucher bar letakkan di bawah ticket priceSelect price+admin fee letakkan di bawah voucher barSelect ketiganya jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 16 Pembuatan komponen quantity tickets selesai. Untuk berikutnya kita akan membuat komponen form data. 5. Membuat desain container form data Untuk komponen ini kita akan membuat form data yang berupa form yang perlu diisi oleh user isi form ada nama, nomor telepon, dan email. Berikut langkahnya Buat teks “Form Data” = Poppins, 14, bold, warna #13181DBuat teks “Orderer’s Name” = Poppins, 14, medium, warna #13181DBuat teks “Enter your name” = Poppins, 14, regular, warna #B2B5BASelect teks “Enter your name” jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftHorizontal padding: 14pxVertical padding: 16pxRezize width: 358px, height: 52pxRename object menjadi “input field” pada layer panel di sebelah kiriSelect input field, letakkan di bawah teks “Orderer’s Name”Select “Orderer’s Name” dan input field jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 8Rename object menjadi “Name” pada layer panel di sebelah kiriDuplikat Name (Ctrl+D pada keyboard) sebanyak dua kali. Lalu dua object, rename object menjadi “Phone number” dan “Email” pada layer panel di sebelah kiri dan ubah opsi:Object Phone number ganti teks “Orderer’s Name” menjadi “Phone Number”. Lalu teks yang berada di input field ganti menjadi “Enter your phone number”Object Email ganti teks “Orderer’s Name” menjadi “Email”. Lalu teks yang berada di input field ganti menjadi “Enter your email” Select Phone number, letakkan di bawah NameSelect Email, letakkan di bawah Phone numberSelect Name, **Phone number, dan Email jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 16Rename object menjadi “Input fields” pada layer panel di sebelah kiriSelect Input fields letakkan di bawah teks “Form Data”Select teks “Form Data” dan Input fields jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 16 Tahap membuat komponen form data berhasil dibuat. Komponen berikutnya yaitu membuat komponen payment method. 6. Membuat desain container payment method Pada komponen merupakan payment method yang di mana user akan memilih menggunakan metode pembayaran yang diinginkan. Untuk membuatnya, berikut langkahnya: Buat teks “Payment Method” = Poppins, 14, bold, warna #13181DMasukkan ikon convert card tipe outline dari Iconsax ukuran 24px. Beri warna #13181DBuat teks “Manual Transfer” = Poppins, Regular, 14, warna #B2B5BA kemudian letakan di samping kanan ikon convert cardSelect teks “Manual Transfer” dan ikon convert card dan jadikan ke auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: leftGap between items: 12pxRename object menjadi “transfer” pada layer panel di sebelah kiriMasukkan ikon right arrow tipe outline dari Iconsax ukuran 24px. Beri warna #13181D. Letakkan di samping kanan voucherSelect transfer dan ikon right arrow jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerHorizontal gap between items: autoHorizontal padding: 14pxVertical padding: 16pxRezize search bar dengan width: 358px, height: 56px, dan ubah corner radius: 20Beri warna fill #E8E8E8Rename object menjadi “manual transfer” pada layer panel di sebelah kiriSelect manual transfer, letakkan di bawah teks “Payment Method”Select “Payment Method” dan manual transfer jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 16 Komponen payment method sudah selesai. Berikutnya kita akan membuat komponen price review. 7. Membuat desain container price review Di komponen ini kita akan membuat price review yang akan menunjukkan semua total harga dan dilengkapi dengan button untuk menavigasi ke halaman pembayaran. Berikut langkahnya: Buat teks “TOTAL” = Poppins, 18, semibold, warna #13181DBuat teks “Rp 103,000” = Poppins, 18, semibold, warna #13181D, letakkan di samping kanan teks “TOTAL”Select kedua teks jadikan auto layout (Shift+A pada keyboard)** lalu ubah opsi:Align: centerHorizontal gap between items: autoRezize width: 358px, height: 20pxRename object menjadi “total price” pada layer panel di sebelah kiriUntuk button buat teks “Book Ticket” = Poppins, 18, semibold, warna #13181DSelect teks jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal padding: 12pxVertical padding: 18pxCorner radius: 20pxRezize width: 358px, height: 56px Select button letakkan di bawah total priceSelect **total price ****dan **button jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerVertical gap between items: 16pxLeft, top, right padding: 16pxBottom padding: 21pxBeri warna fill #FFFFFF Komponen price review sudah selesai dibuat. Sekarang, langkah selanjutnya adalah menyusun semua komponen yang telah dibuat—header, movie preview, quantity tickets, form data, method payment dan price review—dalam satu tampilan yang terintegrasi. 8. Menyusun desain-desain komponen Setelah komponen-komponen sudah dibuat, waktunya menyusun komponen-komponen menjadi suatu page. Bisa diikuti dari gambar di atas. Results Nice! Dengan mengikuti step by step, akhirnya kamu berhasil membuat halaman choose seat dan halaman confirmation untuk booking tiket film. Awesome!!! Kesimpulan Dari membuat halaman choose seat dan confirmation kita sudah membantu user untuk memilih tempat kursi yang mana dan juga membantu user untuk mengisi data dan memilih metode pembayaran sesuai kebutuhannya. Tingkatkan keterampilan UI/UX Design kau di kelas BuildWithAngga! Temukan kelas terbaru yang mencakup dasar hingga teknik lanjutan, dipandu oleh instruktur berpengalaman. Gabung sekarang dan jadilah bagian dari komunitas desainer inovatif!

Pernahkah kamu merasa kesulitan menemukan informasi yang kamu butuhkan saat mencari destinasi wisata melalui aplikasi? Halaman rinci (details page) yang kurang informatif dan menarik seringkali menjadi penyebabnya. Melalui e-book ini, kamu akan belajar cara merancang details page yang user-friendly dan mampu memberikan semua informasi penting yang dibutuhkan pengguna. Dengan begitu, aplikasi travel kamu tidak hanya akan terlihat profesional, tetapi juga meningkatkan engagement. Kali ini, kita akan belajar cara membuat UI design “Details Page” untuk aplikasi travel mobile seperti desain di atas! 🤩 Tapi sebelumnya, yuk kita bisa belajar dulu tutorial desain “Homepage Aplikasi Travel Mobile” bisa kamu baca di sini yaa! UI Design Homepage Travel Mobile So, let’s get started making the Details Page! ✨ 1. Buka Figma Pertama, tentu saja buka file baru di Figma ya! Pilih “New Design File” untuk memulai journey-mu membuat UI design 😄 2. Membuat Frame Beserta Grid System Langkah pertama, buatlah frame dengan ukuran iPhone 14 & 15 Pro yang bisa kamu langsung klik di sidebar bagian “Frame”. Tanpa frame, kita tidak bisa membuat desainnya. Jadi pastikan pilih frame sesuai kebutuhan. Jangan lupa untuk gunakan grid system yang ada di sidebar kanan dengan nilai Columns, Count: 4Color Oppacity: #FF0000Margin: 30StretchGutter: 20 Grid system adalah kerangka kerja yang digunakan dalam desain UI/UX untuk mengatur penempatan elemen-elemen desain secara rapi, konsisten, dan seimbang. Ini merupakan fondasi yang kuat untuk menciptakan tampilan yang menarik, mudah digunakan, dan profesional. 3. Memasukan Image Background Lalu untuk background image, buatlah kotak kosong dengan menekan Shift R lalu buatlah ukuran W: 376 dan H: 454 yaa. Lalu buat lagi kotak dengan ukuran yang sama namun Fill: #00000 50%. Isi kotak pertama dengan image hotel yang bisa kamu dapatkan dari unsplash! Setelah itu gabungkan kedua layer; layer image berada di bawah layer hitam 50% ✨ 4. Membuat Button “Back”, “Like” dan “Slide Image” Sekarang kita akan membuat button untuk “Back” dan “Like”. Fungsi button back agar user dapat kembali ke page sebelumnya dan button itu menandakan bahwa destinasi tersebut bisa dimasukan ke list “Like” Untuk membuat button “Back” dan “Like” Kamu bisa mengikuti panduan berikut: Button Back: Buatlah Ellipse dengan Shift O. Gunakan warna #FFFFFTambahkan Shador dengan X:0, Y: 4, Blur 10, dan warna #00000 5%Insert ikon “Back” yang dapat kamu temukan di Iconsax dengan warna #202020Gabungkan circle dan icon menjadi satu seperti contoh di atas. Button Like: Buatlah Ellipse dengan Shift O. Gunakan warna #FFFFFFTambahkan Shador dengan X:0, Y: 4, Blur 10, dan warna #000000 5%Insert ikon “Like” yang dapat kamu temukan di Iconsax dengan warna #FF0000Gabungkan circle dan icon ke menjadi satu seperti contoh di atas. Nah sekarang kita akan membuat elemen untuk image hotel. Agar pengguna bisa slide ke image-image lainnya dari hotel tersebut. Button slide image hotel adalah tombol yang memungkinkan pengguna untuk melihat lebih banyak foto dari sebuah hotel dengan cara menggeser gambar secara horizontal. Untuk button slide foto, kamu bisa:Buat rectangle dengan Shift R, W: 77 dan H:22 dengan corner radius 15°.Fill kotak dengan #6D6F6C 80%Lalu masukan circle dengan Shift O dengan ukuran lebih kecil. Untuk circle pertama, besarnya 10px dengan warna #FFFFFF dan untuk 2 lingkaran lainnya di 10px dengan warna #7B7B7B. 5. Background Kotak Details Sekarang kita akan membuat kotak untuk container informasi hotel. Container ini bisa kita sebut sebagai bagian body dari aplikasi tersebut dan mencakup beberapa informasi hotel. Buat kotak, tekan Shift R dengan W: 375 dan H: 579 dan corner radius sisi kanan atas dan kiri 25° sedangkan sisi bawah kanan dan kiri 0°. 6. Informasi Nama Hotel, Rate dan Lokasi Hotel Dan untuk membuat isi container informasi nama hotel, rate hotel dan lokasi hotel, kamu bisa ikuti panduan ini yaa Shift T lalu ketik “Sheraton Jogja Hotel”: Poppins, Semibold, 24px dengan color #202020Icon bintang dengan size 16px #FFB545 dan rate “4.8” 11px, Medium #797979Icon “Location” dengan size 16px #2552E1Shift T lalu ketik “Yogyakarta, Indonesia”: 11px, Medium dan #797979 Nama hotel, rating hotel, dan lokasi hotel adalah informasi dasar namun sangat penting dalam aplikasi travel mobile. Informasi ini tidak hanya membantu pengguna dalam menemukan hotel yang tepat, tetapi juga meningkatkan kepercayaan dan kepuasan pengguna. 7. Kontainer “Popular Activities” "Popular Activities" itu kayak daftar menu makanan di restoran, tapi ini daftar kegiatan seru yang biasanya dilakukan tamu di hotel Sheraton Jogja. Jadi, kalau kamu lagi bingung mau ngapain selama menginap di hotel ini, kamu bisa lihat bagian ini. Di sini kamu akan menemukan beberapa pilihan kegiatan yang paling sering dilakukan tamu lain, seperti misalnya berenang, atau sekadar bersantai di ruang tamu yang luas. Pertama, kita masukan teks dengan menekan Shift T lalu ketik “Popular Activities” di 14px, Semibold dan #202020. Selanjutnya “See All” di ukuran 12px, Medium dan warna #2552E1. Icons Nah dan sekarang kita akan membuat elemen dari “Popular Activities”! Gampang kok caranya, yuk simal 🥰 Untuk bagian icons, kamu bisa mengikuti gambar di atas: Untuk ukuran semua icons, buat di 24px yaaBeri warna ikon #2552E1Untuk label ikon seperti “2 Bedrooms”, “Living Room”, “Non Smoking” dan “Swimming Pool” buat di ukuran 12px, Regular dan #757575Untuk gap antar icon dan label adalah 8px dan jarak antar ikon ke ikon sendiri adalah sejauh 21px Ikon yang jelas berperan penting dalam meningkatkan pengalaman pengguna (UX) dengan memberikan informasi secara cepat dan intuitif. Berikut adalah ciri-ciri ikon yang jelas: 8. Details “Location” Sekarang kita akan membuat container untuk bagian “Location”! Untuk membuat detail “Location” pun juga mudah loh guys! Shift T lalu ketik “Location”: 14px, Semibold dan #202020Untuk membuat image “Map”, kamu bisa search di Figma Community atau bisa klik link Google Map Figma Community ini yaa!Save gambar peta yang kamu pilih as JPGBuat rectangle untuk layer image map dengan ukuran W: 315 dan H: 120 dengan corner radius 10°.Klik “Fill” pada sidebar di kotak putih yang sudah disediakan untuk Map lalu ganti Fill dengan Image, insert image map yang sudah kamu save maka otomatis kotak putih tersebut isinya adala image map. Fungsi Utama Container “Location”: Mengumpulkan informasi lokasi: Mendapatkan koordinat GPS atau alamat pengguna untuk digunakan oleh aplikasi.Dapat menampilkan informasi lokasi: Menunjukkan lokasi pengguna saat ini atau lokasi yang dipilih.Memungkinkan pencarian lokasi: Memungkinkan kamu sebagai pengguna untuk mencari alamat atau tempat tertentu. 9. Desain “Nearest Destinations” Untuk mendesaon “Nearest Destination” juga mudah lho guys "Nearest Destinations" pada aplikasi travel memiliki peran yang sangat penting dalam memberikan pengalaman pengguna yang lebih baik. Fitur ini memberikan gambaran singkat tentang tempat-tempat menarik atau fasilitas yang terdekat dari lokasi pengguna saat ini. Klik Shift T lalu masukan teks “Nearest Destinations” dengan size 14px, Semibold dan warna #202020 Untuk ikon, kamu bisa dapatkan dari Iconsax yaa.Icon “Keranjang” ada di size 18px dan #797979Tambahkan teks “Pasar Baru**,** Jogja”: 9px, Medium dan #797979Tambahkan teks jarak “28km” di 9px, Bold dan #202020Icon “Museum” ada di size 18px dan #797979Tambahkan teks “Museum JogjArt”: 9px, Medium dan #797979Tambahkan teks jarak “8km” di 9px, Bold dan #202020 Jarak antar ikon ke teks adalah sejauh 8px dan jarak ke “kilometer” adalah 188px Jarak atas-bawah “Pasar Baru” dan “Museum JogjArt” adalah 2px. Oh iya, "Nearest Destinations" menampilkan dua tempat terdekat, yaitu "Pasar Kota Batu" dan "Museum JogjArt". Informasi jarak juga disertakan untuk memberikan gambaran yang lebih jelas tentang seberapa dekat kedua tempat tersebut dengan lokasi pengguna. Dengan adanya informasi ini, pengguna dapat dengan mudah memutuskan apakah mereka ingin mengunjungi salah satu dari tempat-tempat tersebut. You’re Close to the Finish! Nah sekarang you are one step closer ke tahap finishing! Tinggal satu nih yang kurang 🤔 10. Desain Bottom Navigation Bar Yup betul! Sekarang kita akan mendesain Bottom Navigation Bar 🎉 Pertama buat rectangle dengan Shift R, W: 375 dan H: 90Fill kotak #FFFFFFStroke= #D9D9D9Ketebalan stroke 0.5Beri shadow dengan X: 0 dan Y: 4, Blur: 7, Spread: 3 lalu warna shadow #6D6F6C 25%. Untuk isi kotak: Shift T lalu ketik “Start from”: Poppins, 11px, Regular #797979“IDR 4.325.000”: Poppins, 16px, Semibold #FF7A00 Untuk button “Book Now” Buat rectangle dengan W: 120 dan H: 38 dengan corner radius 20°Fill kotak dengan #2552E1Tambahkan drop shadow X: 0, Y: 4, Blur: 10, dengan warna #407BFF 10% Dan selesaii! Kamu sudah bisa membuat bottom navigation bar 🤩 Button navigation bar merupakan elemen penting dalam desain UI/UX aplikasi travel mobile. Dengan perancangan yang baik, fitur ini dapat meningkatkan pengalaman pengguna, memudahkan navigasi, dan meningkatkan efisiensi dalam menggunakan aplikasi 🙂 Result! 🎉 Finally! Nah sekarang kamu baru saja belajar mendesain laman “Details” untuk aplikasi travel! Tambahkan Status Bar dan Home Bar Dengan menambahkan Status Bar dan Home Bar iPhone, maka tampilan UI-mu terlihat lebih realistik! Kamu bisa mendapatkannya dari plugin ini yaa Making Design Presentation with Mockup Untuk membuat design presentation menggunakan mockup, kamu bisa gunakan plugin Mockup Plugins ini yaa! Karena saat kamu ingin mempresentasikan desainmu, client harus bisa melihat gambaran desain yang sudah jadi itu seperti apa. Gimana Sih Caranya? Siapkan Plugin Siapkan frame yang ingin dipakaikan mockupi lalu klik kanan dan pilih plugins. Pilih plugins “Mockup Plugins” yang tadi sudah di-instal lalu pilih mockup sesuai dengan screen kalian! Run the Plugin Klik tanda “+” pada layar plugin Siapkan Frame UI lalu select frame yang ingin kamu tambahkan mockup. Copy dan Paste Hasil Mockup Klik “Paste” pada screen mockup maka mockup-mu akan tersalin ke dalam file Figma-mu! Dan… Selesai! Mockup ini sangan penting untuk kamu gunakan saat ingin mempresentasikan desain UI-mu loh! Penutup 🎉 Mendesain UI untuk “Details Page” aplikasi travel mobile ini cocok untuk pemula yang ingin mencoba membuat desain suatu aplikasi loh! Dengan desain detail page yang tepat, kamu tidak hanya akan meningkatkan tampilan aplikasi travelmu, tetapi juga memberikan dampak yang signifikan terhadap bisnis. Pengguna yang puas dan terkesan akan lebih cenderung untuk melakukan booking dan merekomendasikan aplikasimu kepada orang lain. Masih bingung mau belajar UI/UX di mana? Yuk mending join kelas-kelas UI/UX BuildWithAngga dan asah desigining skill-mu dan bikin portofolio yang berkualitas! Dijamin deh, bikin portofolio dari belajar di BuildWithAngga tuh kemungkinan besar dilirik client loh 🥰

Di artikel kali ini, kita akan mempelajari langkah-langkah membuat UI design laman detail untuk platform jual-beli mobil bekas menggunakan Figma. kita akan membahas cara menciptakan tampilan yang informatif dan menarik untuk pengguna, dengan merancang elemen penting seperti galeri foto mobil, spesifikasi teknis mobil, informasi harga, serta komponen pendukung lainnya. Ada beberapa alasan, mengapa desain laman detail yang baik sangat penting untuk platform jual-beli mobil bekas, seperti: Memberikan informasi lengkap dan transparan kepada calon pembeliMeningkatkan kepercayaan pengguna terhadap platformMemfasilitasi proses pengambilan keputusan pembelian Sebelum itu, kamu perlu tau dulu nih seperti apa tampilan dari laman detail yang akan kamu buat, dan kurang lebih seperti ini nih tampilannya: Tapi sebelumnya, kamu bisa baca dulu tutorial-tutorial pages lain untuk website jual-beli mobil bekas nih, seperti: “Tutorial Bikin UI Design Landing Page Jual-Beli Mobil Bekas” yang bisa kamu baca di sini“Tutorial Bikin UI Design: Laman Pencarian Jual-Beli Mobil Bekas dengan Figma” yang bisa kamu baca di sini Nah, Gimana?, keren kan?, Sekarang mari kita mulai perjalanan desain kita untuk menciptakan laman detail yang informatif, menarik, dan bermanfaat untuk pengguna, Let’s Gooooo! 🚗✨" 1. Buka Software atau Website Figma Karena kita menggunakan figma untuk membuat tampilan laman detail, kamu bisa buka dulu software figma-nya, atau kamu juga bisa akses melalui website figma ya!!!, dan dalam tutorial ini saya menggunakan figma yang versi website. Kemudian jangan lupa login menggunakan akun kamu, dan jika tidak punya akun, kamu bisa membuatnya dulu ya. Setelah berhasil login, kamu bisa langsung memilih New Design File untuk membuat file desain baru, yang nantinya akan kamu gunakan untuk membuat desainnya, dan tampilannya seperti ini nih: Setelah klik New Design File, nantinya kamu akan di arahkan ke halaman canvas baru kamu, dengan tampilan seperti ini: Dan, dijelaskan sedikit mengenai bagian yang saya highlight yaaa, supaya nantinya kamu sudah tau bagian mana yang nantinya akan digunakan: Toolbar: berisi tools yang bisa kamu gunakan untuk menambahkan elemen desain, contohnya: shape, frame, pen-tool, text, plugin, komentar, hand-tool. dan di dalamnya juga tampilkan short cut, apabila kamu malas bolak balik buka toolbar-nya, dan berikut penjabarannya: Left Sidebar: berisi halaman, asset, dan identitas dari elemen, komponen, serta frame yang sudah kamu buat di dalam canvas, dan kamu bisa mengganti namanya sesuai yang kamu butuhkan, dan berikut penjabarannya: Right Sidebar: berisi editor yang berfungsi untuk merubah nilai dari elemen, serta frame yang sudah kamu buat di dalam canvas, serta ada bagian yang bernama Export yang bisa kamu gunakan untuk mendownload hasil desain kamu loh, dan berikut penjabarannya: Canvas: area yang bisa kamu gunakan untuk membuat desain, dan kamu bisa memanfaatkan toolbar untuk membuat elemen dan frame desain yang kamu inginkan, dan berikut penjabarannya: Nah, ketika kamu sudah mulai mendesain, maka contoh tampilan left sidebar, canvas, dan right sidebar akan seperti ini nih: Setelah memahami bagian-bagian penting pada figma, selanjutnya, kamu sudah bisa untuk memulai membuat tampilan laman detail, pertama bisa dengan membuat bagian frame utama terlebih dulu di dalam canvas. 2. Bagian Frame Utama frame utama merupakan bagian yang sangat penting, karena berfungsi untuk menempatkan elemen, frame dan komponen yang akan kita buat nantinya, dan mari kita lanjut untuk membuat frame utama. 3. Cara Membuat Frame Utama Untuk membuat frame utama, kamu bisa menggunakan frame ukuran Macbook Air dan dapat ditambahkan dengan cara: Tekan tombol “F” pada keyboard, & jangan klik mouse kam, tapi langsung pilih opsi Macbook Air pada bagian Right Sidebar yang akan kamu jadikan sebagai frame utamaKemudian, select frame utama, lalu pada Right Sidebar ubah:Width: 1280pxHeight: 1957pxBackground Fill: #FFFFFF Kemudian, kamu bisa gunakan layout grid columns, yang berfungsi memandu jarak di dalam frame, supaya nanti kamu bisa dengan mudah mengatur letak elemen, komponen, dan frame. dan kamu bisa menggunakan fitur ini dengan cara: Select frame utama, kemudian pada Right Sidebar pilih Layout GridLalu, klik icon “+”, kemudian ganti dari Grid menjadi ColumnsKemudian, ubah nilai di dalam Columns menjadi:Count: 12Margin: 64Gutter: 20Color Oppacity: 5% (apabila garisnya terlalu terang, bisa kamu turunkan lagi misalnya menjadi 3%) Setelah berhasil membuat frame utama, kamu sudah bisa memulai untuk membuat bagian-bagian dari laman details nih, dan akan dimulai dari bagian Top Bar dulu ya. 4. Bagian Top Bar Bagian Top Bar berada di posisi paling atas di frame utama, dan berfungsi sebagai alat navigasi pengguna di dalam website jual beli mobil bekas, yang berisi Logo, Menu Navigasi, Searchbar, Notifikasi, dan Profile, nah maka dari itu bagian ini sangat penting banget guysss. Tapi, sebelumnya kita perlu membuat Top Bar Area dulu nih, karena akan berfungsi sebagai wadah dari elemen, serta komponen Top Bar nanti, dan mari kita lanjut untuk membuat Top Bar Area. 5. Cara Membuat Top Bar Area Untuk membuat Top Bar Area di dalam frame utama, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan tombol “F” pada keyboard, lalu klik kiri pada mouse untuk menambahkan frame baru Top Bar Area, kemudian tempatkan ke dalam frame utamaselect frame Top Bar Area, dan ubah nilai pada Right Sidebar:Ubah width menjadi 1280px, sama seperti frame utama.Ubah height menjadi 125pxBackground Fill: #FFFFFFStroke: ketebalan 1, Outside, down, dan Fill: #F0F0F0Jangan lupa masukan ke dalam frame utama yaa Setelah berhasil membuat Top Bar Area, maka bisa kamu lanjutkan untuk membuat elemen, dan komponen di dalam area tersebut, dan mari kita lanjut ke cara pembuatannya. 6. Cara Membuat Elemen, dan Komponen Di Dalam Top Bar Area Di dalam Top Bar Area, perlu kamu tambahkan elemen serta komponen penting, yang nantinya bisa memudahkan pengguna bernavigasi di dalam website ini, dan antara lain seperti Logo, Menu Navigasi, Searchbar, Icon Notifikasi dengan Badge, dan Profile. Cara Membuat Logo: Untuk Logo, kamu bisa membuat komponen ini dengan cara:Ketik huruf “S”, select text-nya, lalu pada Right Sidebar ubah style text: Inter, Black, dan 36px.Klik kanan pada text tersebut, kemudian pilih frame selection.select text-nya, dan ubah nilai pada Right Sidebar:Ubah width, dan height dari frame tersebut menjadi 44px.Tambahkan fill background pada frame tersebut, dan ubah menjadi linear, dengan:stops 0% #588CF3, Oppacity: 100%stops 100% #115BEE, Oppacity: 100%Ubah border radius frame tersebut menjadi 12px.Kemudian masukan ke dalam frame top bar area Lalu, letakan logo di dalam top bar area dengan jarak kiri top bar area 62px dan atasnya 40px. Cara Membuat Menu Navigasi: Untuk Menu Navigasi, kamu bisa membuat komponen ini dengan cara:Tambahkan 3 text sesuai gambar, dan select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Reguler, 16px, dan Text Fill: #2F3137Tambahkan icon down linear, dan select icon tersebut, lalu pada Right Sidebar ubah warna icon menjadi #97989B, lalu select icon tersebut dan ketik shortcut CTRL + D untuk copy paste sehingga kamu memiliki 2 icon downUntuk icon bisa kalian dapatkan di sini yaaa !.Select kedua icon tersebut, kemudian tekan tombol “k” pada keyboard, lalu di Right Sidebar, ubah height keduanya dari 24px, menjadi 15pxSetelah itu tempatkan icon down pertama di sebelah text Jual Mobil, dan tempatkan icon down kedua di sebelah text Beli MobilSupaya lebih rapih, gunakan auto layout untuk bagian Jual Mobil, dan Beli Mobil, atur jarak text dan icon sebesar 8pxKemudian masukan ke dalam frame top bar area Lalu, letakan Menu Navigasi di dalam top bar area dengan jarak kiri dengan logo sebesar 133px Cara Membuat Searchbar: Untuk Searchbar, kamu bisa membuat komponen ini dengan cara:Tambahkan text “Search….”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Medium, 16px, dan Text Fill: #636569Tambahkan icon search linear, kemudian select icon tersebut, lalu ketik shortcut CTRL + ALT + G untuk menambah frame untuk icon tersebut, kemudian tambahkan auto layout dengan ketik shortcut Shift + A, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Padding: 8pxVertical Padding: 8pxBackground Fill: #3775F1Icon Fill: #FFFFFFDrop Shadows: y 4, Blur 15, Spread -3, dan Fill: #000000 25% (apabila spread tidak aktif, kalian cukup select frame kemudian aktifkan clip content)Kemudian select icon yang sudah kamu buat tadi, kemudian tekan tombol “K” pada keyboard kemudian ubah ukurannya pada Right Sidebar dari 40px jadi 24pxLalu, select text “Search….”, dan icon yang sudah kamu buat tadi, lalu ketik shortcut Shift + A, untuk membuat auto layout baru, lalu pada Right Sidebar ubah nilai:Horizontal Resizing: fixedWidth: 268pxBorder Radius: 100Horizontal Gap: Auto (berfungsi untuk mengatur gap antar elemen auto layout secara otomatis)Horizontal Padding: 12, 8pxVertical Padding: 12pxBackground Fill: #FAFAFAStroke: ketebalan 1, inside, dan Fill: #F0F0F0Kemudian masukan ke dalam frame top bar area Lalu, letakan searchbar di dalam top bar area, sebelah kananmenu navigasi dengan jarak sebesar 97px Cara Membuat Notifikasi: Untuk Notifikasi dengan Badge, kamu bisa membuat komponen ini dengan cara:Tambahkan icon notification bold, select icon tersebut, lalu pada Right Sidebar, ubah warnanya menjadi #2F3137Lalu, select kembali icon tersebut kemudian tekan tombol “k” pada keyboard, lalu di Right Sidebar, ubah ukurannya dari 24px menjadi 32pxUntuk badge, kita tambahkan text “10+”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Reguler, dan 12pxKemudian, select kembali text tersebut, dan ketik shortcut Shift + A pada keyboard untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah nilai:Horizontal Padding: 8pxVertical Padding: 4pxBorder Radius: 20pxTambahkan warnanya menjadi Background Fill: #EF5948Ganti warna text menjadi #FFFFFFKemudian susun seperti gambar, dan masukan ke dalam frame top bar area Lalu, letakan notifikasi dengan badge di dalam top bar area denganjarak kanan top bar area 261px dan atasnya 40px Cara Membuat Profile: Untuk Profile, kamu bisa membuat komponen ini dengan cara:Tambahkan 2 text dengan kondisi:Pertama untuk nama kamu, kemudian select text-nya, lalu pada Right Sidebar ubah style text: Inter, Medium, dan 14pxkedua untuk kata “Penjual”,kemudian select text-nya, lalu pada Right Sidebar ubah style text: Inter, Reguler, dan 14px.Untuk membuatnya lebih rapih, pertama susun kedua text-nya secara vertikal, nama kamu di atas, dan text penjual di bawah, lalu select keduanya, dan ketik shortcut Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah nilai:Vertical Gap: 0pxHorizontal Padding, dan Vertical Padding: 0pxUntuk foto profile, pertama tekan tombol “O” pada keyboard untuk tambahkan lingkaran, select lingkarannya, lalu pada Right Sidebar ubah ukuran width, dan height menjadi 56px.Lalu, tambahkan juga stroke dengan ketebalan 1, Outside, dan #E5E5E5Kemudian, isi dengan foto yang kalian suka, atau kalian bisa mencari foto lain di Unsplash yaa !!!Kemudian susun seperti gambar, dan masukan ke dalam frame top bar area lalu, letakan profile di dalam top bar area dengan jarak kanan top bar area 56px dan atasnya 34px Maka, hasilnya akan seperti gambar ini: Setelah berhasil membuat Top Bar Area serta elemen, dan komponen di dalamnya, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Galeri Mobil. 7. Bagian Galeri Mobil Bagian Galeri Mobil berada di posisi bawah setelah Top Bar, dan berfungsi untuk menampilkan foto mobil yang dijual oleh penjual, supaya calon pembeli bisa melihat langsung seperti apa tampilan mobil yang dijual, nah maka dari itu bagian ini sangat penting banget ya guysss. Dan ingat, sebelum kita membuat elemen dan komponen untuk Galeri Mobil, kita perlu membuat areanya terlebih dulu, dan mari kita lanjut untuk membuat Galeri Mobil Area. 8. Cara Membuat Galeri Mobil Area Untuk membuat Galeri Mobil Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan tombol “F” pada keyboard lalu, klik kiri pada mouse untuk menambahkan frame baru Galeri Mobil Area, kemudian tempatkan ke dalam frame utama.Kemudian, select frame Galeri Mobil Area, dan ubah nilai pada Right SidebarBackground Fill: #FFFFFFwidth menjadi 1280px, sama seperti frame utama.height menjadi 546pxJangan lupa masukan ke dalam frame utama Setelah berhasil membuat Galeri Mobil Area, maka bisa kamu lanjutkan untuk membuat elemen, dan komponen di dalam area tersebut, dan mari kita lanjut ke cara pembuatannya. 9. Cara Membuat Elemen, dan Komponen di Dalam Galeri Mobil Area Di dalam Galeri Mobil Area, perlu kamu tambahkan beberapa elemen, dan komponen yang nantinya dapat membantu pengguna dalam menggunakan bagian Galeri Mobil, antara lain Gambar Mobil, Preview & Jumlah Foto Mobil, dan tombol next dengan memanfaatkan icon. Cara Membuat Gambar Mobil: Untuk Gambar Mobil, kamu bisa membuatnya dengan cara:Tekan tombol “R” pada keyboard untuk membuat rectangle, dan tempatkan ke dalam frame Gambar Mobil Area, Kemudian isi dengan foto mobil yang kalian suka, atau kalian bisa mencari foto lain di Unsplash yaa !!!select rectangle berisi gambar tersebut, lalu pada Right Sidebar:Ubah width dari rectangle tersebut menjadi 1280px, sama seperti frame Galeri Mobil Area.Ubah height dari rectangle tersebut menjadi 546px, sama seperti frame Galeri Mobil Area. Cara Membuat Tombol Next: Untuk tombol next, kamu bisa membuatnya dengan cara:Tambahkan icon right linear, kemudian select icon tersebut, lalu ketik shortcut CTRL + ALT + G untuk menambah frame kepada icon tersebut, dilanjutkan tambah auto layout dengan ketik shortcut Shift + A, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Padding: 16pxVertical Padding: 16pxBackground Fill: #2F3137, Oppacity: 20%Background Blur: 20Icon Fill: #FFFFFFJangan lupa masukan ke dalam frame Galeri Mobil Area yaaaa!!!Lalu, jika suatu saat kamu ingin membuat juga tombol previous, kamu cukup copy paste icon yang sudah kamu buat tadi, kemudian select dan klik kanan pada mouse, kemudian Flip Horizontal. Cara Membuat Preview, dan Jumlah Foto Mobil: Untuk Preview, dan Jumlah Foto mobil, kamu bisa membuatnya dengan cara:Pertama tekan tombol “O” pada keyboard, lalu klik kiri pada mouse untuk tambahkan lingkaran, kemudian select lingkaran, lalu pada Right Sidebar ubah ukuran width, dan height menjadi 70px.Kemudian, isi dengan foto mobil yang kalian suka, atau kalian bisa mencari foto lain di Unsplash yaa !!!Lalu, copy paste lingkaran yang sudah berisi foto tersebut dengan cara ketik shortcut CTRL + D, maka saat ini kamu memiliki 2 lingkaran berisi foto mobilSelect lingkaran yang kedua, lalu pada Right Sidebar ganti fotonya, dan nilai dari lingkarannya seperti:Layer: Luminosity, 100% (Luminosity berfungsi untuk memberikan kesan refleksi warna dari objek lain) Setelah menambahkan Luminosity, select lingkaran pertama dan kedua, kemudian tambahkan auto layout dengan ketik shortcut Shift + A, lalu pada Right Sidebar ubah nilai:Border Radius: 200Horizontal Gap: 20px (kotak biru pada gambar)Horizontal Padding: 12pxVertical Padding: 12pxBackground Fill: #FFFFFF, Oppacity: 12%Stroke: ketebalan 2, inside, Fill: #FFFFFF, Oppacity: 12%Background Blur: 10Kemudian, copy paste lingkaran yang berisi Luminosity, sebanyak 3 kali, dan ganti gambarnya dengan gambar yang kalian inginkan.Tempatkan di dalam frame Galeri Mobil Area, dengan posisi frame berada di atas rectangle gambar Lalu, tambahkan text “10+”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Medium, dan 20pxselect text tersebut, lalu ketik shortcut CTRL + ALT + G untuk menambahkan frame kepada text tersebut, lalu pada Right Sidebar ubah nilai:Border Radius: 100Width: 70pxHeight: 70pxBackground Fill: #FFFFFF, Oppacity: 12%Jangan lupa posisikan text di tengah frame yaaa!!!Lalu, masukan text yang sudah kamu buat ke dalam auto layout lingkaran yang sudah kamu buat sebelumnya.Maka hasil akhirnya akan tampil seperti ini: Setelah berhasil membuat elemen, dan komponen di dalam Galeri Mobil Area, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Header Informasi Mobil. 10. Bagian Header Informasi Mobil Bagian Header Informasi Mobil berada di posisi bawah setelah Galeri Mobil, dan berfungsi sebagai pemberi informasi dari mobil yang dijual oleh penjual, serta fitur seperti wishlist, share, dan menu yang nantinya bisa di gunakan oleh pengguna, nah maka dari itu bagian ini sangat penting banget ya guysss. Dan ingat, sebelum kita membuat elemen dan komponen untuk Header Informasi Mobil, kita perlu membuat areanya terlebih dulu, dan mari kita lanjut untuk membuat Header Informasi Mobil Area. 11. Cara Membuat Header Informasi Mobil Area Untuk membuat Header Informasi Mobil Area tersebut, kamu bisa membuatnya dengan cara: Tekan tombol “F” pada keyboard lalu, klik kiri pada mouse untuk menambahkan frame baru Header Informasi Mobil Area, kemudian tempatkan ke dalam frame utama.select frame Header Informasi Mobil Area, dan ubah nilai pada Right Sidebar:Ubah width menjadi 955px, sama seperti frame utama.Ubah height menjadi 285pxAlignment: MiddleJarak dengan Galeri Mobil Area sebesar 40px Setelah berhasil membuat Header Informasi Mobil Area, maka bisa kamu lanjutkan untuk membuat elemen, dan komponen di dalam area tersebut, dan mari kita lanjut ke cara pembuatannya. 12. Cara Membuat Elemen, dan Komponen di Dalam Header Informasi Mobil Area Di dalam Header Informasi Mobil Area, perlu kamu tambahkan elemen serta komponen penting, yang nantinya bisa memudahkan pengguna untuk melihat dan share informasi dari mobil yang dijual, dan antara lain seperti Breadcrumb, Nama Mobil, Harga Mobil, Label Negotiable, dan section Publish, & Share. Cara Membuat Breadcrumb: Untuk membuat Breadcrumb, kamu bisa membuatnya dengan cara:Tambahkan text “Home”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Reguler, 14px, dan Text Fill: #97989BSelect text “Home”, dan copy paste dengan cara ketik shortcut CTRL + D hingga muncul 8 text lagi, kemudian ganti isi text tersebut, sesuai yang ada pada gambar.Kemudian, select semua text lalu Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah nilai:Horizontal Gap: 16pxHorizontal Padding: 0pxVertical Padding: 0pxLalu, tempatkan ke dalam frame dan letakan di bagian pojok kiri atas dengan jarak sebesar 0px. Cara Membuat Nama Mobil, dan Harga Mobil: Untuk Nama Mobil, dan Harga Mobil, kamu bisa membuatnya dengan cara:Tambahkan text nama mobil yang kamu mau, lalu select text tersebut, dan pada Right Sidebar ubah style text: Inter, Medium, 48px, dan Text Fill: #2F3137Tambahkan text harga yang kamu mau, lalu select text tersebut, dan pada Right Sidebar ubah style text: Inter, Bold, 44px, Text Fill: #2F3137, dan untuk text “RP”, ubah Oppactity: 40%.Lalu, tempatkan ke dalam frame dan letakan di bagian kiri di bawah Breadcrumb, dengan jarak Vertical Gap: 36px, dan untuk Vertical Gap nama, dan harganya sebesar 32px Cara Membuat Label Negotiable: Untuk Label Negotiable, bisa kamu buat dengan cara:Tambahkan text “Negotiable”, dan select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Medium, 20px, dan Text Fill: #3775F1Lalu, select kembali text tersebut, ketik shortcut Shift + A untuk aktifkan auto layout, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Padding: 14pxVertical Padding: 12pxBackground Fill: #3775F1, Oppacity: 5%Stroke: ketebalan 1, inside, dan Fill: #3775F1Kemudian letakan di sebelah kanan harga mobil dengan jarak keduanya sebesar 20px Cara Membuat Section Publish and Share: Untuk section Publish, & Share, kamu bisa membuatnya dengan cara:Tambahkan icon calendar linear, kemudian select icon tersebut, lalu pada Right Sidebar ubah warna icon menjadi #949698Tambahkan text “Published on 20/06/2024” select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Reguler, 16px, dan Text Fill: #7D7E82Select icon calendar linear, dan juga text tersebut kemudian ketik shortcut Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah nilai:Horizontal Gap: 16pxHorizontal Padding: 0pxVertical Padding: 0px Cara Membuat Tombol Love, Share, dan Menu: Tambahkan icon heart linear, kemudian select icon tersebut kemudian tekan tombol “K” pada keyboard, lalu pada Right Sidebar ubah ukurannya dari 24px menjadi 18px, dan ganti warnanya menjadi #949698kemudian select icon tersebut, lalu ketik shortcut CTRL + ALT + G untuk menambah frame, kemudian tambahkan auto layout dengan ketik shortcut Shift + A, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Padding: 6pxVertical Padding: 6pxBackground Fill: #2F3137, Oppacity: 3%Stroke: ketebalan 1, inside, dan Fill: #2F3137, Oppacity: 12%Lalu, copy paste icon heart sebanyak 2 kali, dan ganti icon sesuai gambarselect ketiganya, lalu ketik shortcut Shift + A, untuk menambahkan auto layout, lalu pada Right Sidebar ubah nilai:Horizontal Gap: 24px (yang ditandai kotak biru pada gambar)Horizontal Padding: 0pxVertical Padding: 0px Select auto layout yang berisi icon calendar, dan text, serta select auto layout yang berisi 3 icon yang sudah kamu buat sebelumnya, kemudian ketik shortcut Shift + A untuk membuat auto layout, lalu pada Right Sidebar ubah nilai:Horizontal Resizing: fixedWidth: 955pxHeight: 57pxBorder Radius: 100Horizontal Gap: AutoHorizontal Padding: 20, 12pxVertical Padding: 8pxBackground Fill: #2F3137, Oppacity: 1.5% (jika menurut kamu kurang terang, bisa di naikan sedikit, misalnya menjadi 3%-5%)Stroke: ketebalan 1, inside, dan Fill: #F0F0F0 Lalu, tempatkan ke dalam frame dan letakan di bagian kiri di bawah Harga Mobil, dengan jarak keduanya sebesar 32pxMaka hasil akhirnya akan seperti ini: Setelah berhasil membuat Header Informasi Mobil Area serta elemen, dan komponen di dalamnya, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Spesifikasi Teknis Mobil. 13. Bagian Spesifikasi Teknis Mobil Card Bagian Spesifikasi Teknis Mobil berada di posisi bawah setelah Header Informasi Mobil Area, dan berfungsi sebagai pemberi rangkuman informasi dari spesifikasi mobil yang dijual, nah maka dari itu bagian ini sangat penting banget ya guysss. Nah, Karena komponen Spesifikasi Teknis Mobil Card tidak membutuhkan area khusus seperti bagian-bagian sebelumnya, dan cukup di tempatkan di frame utama saja, maka kamu bisa langsung membuatnya di dalam frame utama loh, dan mari kita lanjut ke cara pembuatannya. 14. Cara Membuat Spesifikasi Teknis Mobil Card Untuk membuat Spesifikasi Teknis Mobil Card kamu hanya butuh satu card beserta elemen dalamnya saja, karena card tersebut nantinya bisa kamu gunakan lagi dengan isi elemen yang berbeda Untuk Spesifikasi Teknis Mobil Card, kamu bisa membuatnya dengan cara:Tekan tombol “F” pada keyboard lalu, klik kiri pada mouse untuk menambahkan frame baru Spesifikasi Teknis Mobil Card, kemudian tempatkan ke dalam frame utama.select frame Spesifikasi Teknis Mobil Card, dan ubah nilai pada Right Sidebar:Background Fill: #2F3137, Oppacity: 2%.Stroke: ketebalan 1, inside, dan Fill: #2F3137, Oppacity: 5%Ubah width dari frame tersebut menjadi 145px.Ubah height dari frame tersebut menjadi 91pxBorder Radius: 12Tambahkan text “Kondisi”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Reguler, 18px, dan Text Fill: #8F9499Tambahkan text “Bekas” , select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Semibold, 24px, dan Text Fill: #2F3137Lalu untuk membuat text tersebut lebih rapi, bisa disusun secara vertikal, pertama select text “Kondisi”, serta “Bekas”, dan tambahkan auto layout, lalu pada Right Sidebar ubah nilai:Horizontal Padding: 0pxVertical Padding: 0pxSusun secara vertikal, dengan text “Kondisi” berada di atasMasukan kedua text tersebut ke dalam frame card dengan jarak dari sisi kiri sebesar 24pxMaka hasilnya akan terlihat seperti ini: Tambahkan icon car linear, kemudian select icon tersebut dan tekan tombol “K” pada keyboard, lalu pada Right Sidebar ubah ukurannya dari 24px menjadi 56px, dengan Fill: #D2D3D4Lalu, masukan ke dalam frame card sesuai pada gambarSelanjutnya, kamu bisa copy paste dan menambahkan spesifikasi lain dari mobil yang kamu pilih, contoh seperti pada gambarDan jangan lupa letakan di bawah Header Informasi Mobil. Setelah berhasil membuat Spesifikasi Teknis Mobil Card, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Deskripsi. 15. Bagian Deskripsi Bagian Deskripsi berada di posisi bawah setelah Spesifikasi Teknis Mobil Card, dan berfungsi sebagai pemberi informasi detail dari mobil yang dijual, serta infromasi kontak dari si penjual, nah maka dari itu bagian ini sangat penting banget ya guysss. Dan ingat, sebelum kita membuat elemen dan komponen untuk Deskripsi, kita perlu membuat areanya terlebih dulu, dan mari kita lanjut untuk membuat Deskripsi Area. 16. Cara Membuat Deskripsi Area Untuk membuat Deskripsi Area, kamu bisa membuatnya dengan cara: Tekan tombol “F” pada keyboard lalu, klik kiri pada mouse untuk menambahkan frame baru Deskripsi Area, kemudian tempatkan ke dalam frame utama.select frame Deskripsi Area, dan ubah nilai pada Right Sidebar:Stroke: ketebalan 1, inside, dan Fill: #F0F0F0.Ubah width menjadi 955px, sama seperti frame utama.Ubah height menjadi 671pxBorder-Radius Kiri: 40pxBorder-Radius Kanan: 40pxAlignment: Middle (tengah)Jangan lupa masukan ke dalam frame utama yaa Setelah berhasil membuat Deskripsi Area, maka bisa kamu lanjutkan untuk membuat elemen, dan komponen di dalam area tersebut, dan mari kita lanjut ke cara pembuatannya. 17. Cara Membuat Elemen, dan Komponen di Dalam Deskripsi Area Selanjutnya, terdapat beberapa elemen yang perlu ditambahkan ke dalam area tersebut, seperti Di dalam Deskripsi Area, perlu kamu tambahkan elemen serta komponen penting, yang nantinya bisa memudahkan pengguna untuk melihat informasi dari mobil yang dijual, dan antara lain seperti Simple Tab Menu, Text Deskripsi Mobil, Informasi Dealer Area, & Elemen di dalamnya. Cara Membuat Simple Tab Menu: Untuk Simple Tab Menu, kamu bisa membuatnya dengan cara:Tambahkan text “Descriptions”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Semibold, 20px, dan Text Fill: #2F3137Select text tersebut, lalu ketik shortcut Shift + A untuk tambahkan auto layout, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Gap: 0pxHorizontal Padding: 12pxVertical Padding: 16px (bisa ditambahkan apabila menurut kamu terlihat gepeng)Background Fill: #FFFFFFKemudian, copy paste text auto layout tersebut, cukup 1 saja, dan ganti isi text menjadi “Technical Spesifications”.Pada bagian “Technical Spesifications”, hapus warna background-nya, maka sekarang kamu memiliki 2 auto layout dengan isi text, dan tampilan yang berbeda.Select keduanya, lalu ketik shortcut Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah nilai:Horizontal Resizing: FixedWidth: 924pxBorder Radius: 100Horizontal Gap: 20pxselect auto layout text “Descriptions”, dan text “Technical Spesifications”, ubah Horizontal Resizing: FillHorizontal Padding: 20pxVertical Padding: 16px (bisa ditambahkan apabila menurut kamu terlihat gepeng)Background Fill: #2F3137, Oppacity: 3.5%Nah, untuk membuat state active “Descriptions” terlihat lebih dominan, maka kita bisa beri effect sedikit, dengan select bagian tersebut lalu pada Right Sidebar tambahkan:Drop Shadows: y 4, Blur 16, Spread -6, dan Fill: #000000 12%Jika spread tidak terbuka, cukup aktifkan clip content pada bagian frame tersebut (di bagian Right Sidebar) Lalu, Kemudian masukan ke dalam frame Deskripsi Area, dengan jarak sisi atas, kiri, dan kanan sebesar 16px Cara Membuat Text Deskripsi: Untuk Text Deskripsi Mobil, kamu bisa membuatnya dengan cara:Tambahkan text deskripsi mobil, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Reguler, 20px, dan Text Fill: #2F3137Untuk isinya bisa kalian tiru berdasarkan gambar, atau kalian boleh lihat refrensi dari situs jual beli mobil yang lain. Cara Membuat Informasi Dealer Area: Untuk Informasi Dealer Area, kamu bisa membuat areanya dulu, dan dengan cara:Tekan tombol “F” pada keyboard lalu, klik kiri pada mouse untuk menambahkan frame baru Informasi Dealer Area, kemudian tempatkan ke dalam frame Deskripsi Area, dipaling bawah.select frame Informasi Dealer Area, dan ubah nilai pada Right Sidebar:Stroke: ketebalan 1, inside, dan Fill: #F0F0F0.Ubah width menjadi 955px, sama seperti frame Deskripsi Area.Ubah height menjadi 126pxBorder-Radius Kiri: 32pxBorder-Radius Kanan: 32pxAlignment: MiddleJangan lupa masukan ke dalam Deskripsi Area. Cara Membuat foto, dan nama dealer: Kemudian tambahkan foto, dan nama dealer, untuk area foto kamu bisa gunakan lingkaran, select lingkaran lalu pada Right Sidebar ubah Width: 64px, dan Height: 64px, Stroke: ketebalan 2, Outside, dan Fill: #E5E5E5Untuk fotonya, kalian bisa pakai foto yang kalian suka, atau bisa cari di Unsplash yaa !!!Untuk text nama dealer, ubah style pada Right Sidebar menjadi: Inter, Semibold, 20px, dan Text Fill: #2F3137, dan sesuaikan dengan gambarJangan lupa masukan ke dalam Informasi Dealer Area. Cara Membuat label: Tambahkan icon profile tick linear, select icon tersebut, lalu pada Right Sidebar ubah warna icon menjadi #949698Tambahkan text “Dealer”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Reguler, 12px, dan Text Fill: #2F3137Select keduanya, lalu ketik shortcut Shift + A untuk menambahkan auto layout, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Gap: 4pxHorizontal Padding: 8pxVertical Padding: 6pxBackground Fill: #F9FAFAStroke: ketebalan 1, inside, dan Fill: #2F3137, Oppacity: 8%Selanjutnya, label ini bisa kamu copy paste untuk diisi informasi lain, contohnya seperti pada gambarJangan lupa masukan ke dalam Informasi Dealer Area. Cara Membuat Wishlist: Tambahkan icon heart linear kemudian select icon tersebut, lalu ketik shortcut CTRL + ALT + G untuk menambah frame, kemudian tambahkan auto layout dengan ketik shortcut Shift + A, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Padding: 10pxVertical Padding: 10pxBackground Fill: #2F3137, Oppacity: 3%Icon Fill: #949698Jangan lupa masukan ke dalam Informasi Dealer Area. Cara Membuat tombol kontak: Tambahkan text “Contact”, select text tersebut, lalu pada Right Sidebar ubah style text: Inter, Bold, dan 16pxSelect text tersebut, kemudian ketik shortcut Shift + A, untuk menambahkan auto layout, lalu pada Right Sidebar ubah nilai:Border Radius: 100Horizontal Resizing: fixedWidth: 191pxHorizontal Gap: autoHorizontal Padding: 32pxVertical Padding: 20pxBackground Fill: #3775F1Text Fill: #FFFFFF Jangan lupa masukan ke dalam Informasi Dealer Area.Maka, nanti hasil akhirnya akan seperti ini: 18. Menyusun tiap Section Setelah sukses membuat seluruh bagian-bagian dari laman detail, sekarang bisa kamu pastikan bahwa susunannya sudah benar seperti pada gambar, yaitu Top Bar - Galeri Mobil - Header Informasi Mobil - Spesifikasi Teknis Mobil - Deskripsi - Informasi Dealer, jika susunannya sudah benar, maka hasilnya akan terlihat seperti pada gambar. Results Akhirnya, kamu telah selesai membuat desain “Laman Details Website Jual-Beli Mobil Bekas” dan selanjutnya adalah kamu sudah bisa membuat presentasi desain dengan mockup 🤩, dan untuk membuatnya kita tidak perlu pakai plugin, cukup pakai website shots saja 😁. Membuat Presentasi Desain dengan Mockup Untuk membuat presentasi desain menggunakan mockup, kamu bisa gunakan website shots.so ini yaa! Karena saat kamu ingin mempresentasikan desainmu, client harus bisa melihat gambaran desain yang sudah jadi itu seperti apa, dan berikut caranya: Cara Membuat Presentasi Desain dengan Mockup 1. Export Frame Utama, kemudian Buka website shots(.)so Pertama, kamu bisa export dulu frame utama yang sudah selesai kamu desain, dengan nilai: Scale: 4x (bisa di ubah menjadi 1x-3x, tergantung kebutuhan kamu)Type: PNG (bisa di ubah ke JPG, saran saya pakai PNG saja) Kemudian, bisa kamu lanjutkan dengan membuka laman shots.so 2. Memilih Mockup yang akan di Gunakan Kemudian pada left sidebar, kamu bisa mengklik opsi Screenshot, pilih Laptop, pilih Macbook Air M2. 3. Setelah Mockup dipilih, lalu Upload Gambar yang Sudah di Export Lalu, klik pada area kotak merah untuk mengupload gambar yang sudah kamu export sebelumnya. 4. Merubah Background Gradient menjadi Tansparent, kemudian Download Pada left sidebar, kamu bisa mengklik frame, kemudian ubah background menjadi transparent, kemudian klik download. 5. Hasil setelah Mockup berhasil di Download Setelah berhasil di download kamu sudah bisa bagikan, dan presentasikan kepada client-client kamu deh 🤩🤩😁. Kesimpulan Tutorial Membuat Laman Details Jual-Beli Mobil Bekas Sebelumnya saya ucapkan selamat, karena kamu telah berhasil membuat desain “Laman Details Website Jual-Beli Mobil Bekas” menggunakan figma, dan perlu diingat kalau proses ini mencakup beberapa tahapan penting seperti: Persiapan awal: Memahami software atau website figma, hingga pembuatan frame utama.Memahami Struktur Laman Detail: Membuat komponen-komponen utama seperti Top Bar, Galeri Mobil, Header Informasi Mobil, Spesifikasi Teknis Mobil, Deskripsi, dan Informasi Dealer.Memahami Elemen untuk Laman Detail: Menambahkan elemen-elemen penting seperti gambar, teks, ikon, dan tombol untuk memberikan informasi yang jelas dan lengkap tentang mobil yang dijual.Memahami Style yang digunakan untuk Laman Detail: Mengatur warna, ukuran, dan jarak antar elemen untuk menciptakan desain yang menarik dan mudah dipahamiMenambahkan elemen interaktif: membuat tombol dan tab menu untuk meningkatkan pengalaman pengguna dalam mengakses konten yang diberikan. Nah, dengan melalui proses ini, kamu telah berhasil menciptakan sebuah laman detail yang informatif, menarik, serta bermanfaat, dan pastinya tidak hanya memenuhi kebutuhan pengguna untuk mendapatkan informasi lengkap tentang mobil yang dijual, tetapi juga memberikan kesan visual yang tak terlupakan 🤩🤩. Setelah mempelajari, dan menggunakan teknik-teknik yang dipakai dalam tutorial ini, saya berharap dapat membantu diperjalanan kamu sebagai UI/UX Designer 😊😊. Serta jangan lupa untuk terus berlatih figma, serta fitur-fiturnya seperti auto layout dan component, karena akan sangat membantu kamu kedepannya. Sekali lagi saya ucapkan selamat ya untuk kamu karena telah sukses membuat “Laman Details Website Jual-Beli Mobil Bekas”, good job guys 😊😊. Bagaimana? tutorial-nya keren bukan? nah, jika kamu ingin belajar lebih banyak lagi tentang UI/UX dan meningkatkan skill, dan keterampilan desain kamu, maka jangan sampai lewatkan kesempatan untuk mengeksplorasi kelas-kelas UI/UX di BuildWithAngga !!!, karena kamu bisa pelajari teknik-teknik terbaru, dan meningkatkan portofolio kamu, bersama para mentor di bidangnya 🤩🤩🤩. Credit Gambar Unsplash Dorrell TibbsFlorian BergerMartin KatlerZuka Zurabishvili

Di era digital saat ini, teknologi web terus berkembang dengan pesat. Setiap hari, ada pembaruan dan inovasi terbaru yang membuat website semakin modern dan canggih. Menggunakan teknologi yang tepat sangat penting untuk membuat website yang dapat bersaing di pasar digital. Salah satu teknologi yang menjadi pilihan utama para developer adalah Framework Laravel 11. Dalam artikel ini, kita akan membahas tiga contoh proyek website modern yang cocok dibuat menggunakan Laravel 11, serta fitur-fitur canggih dari Laravel 11 yang mendukung pembuatan website tersebut. Studi Kasus Website Modern E-Commerce PlatformContoh: Situs belanja online dengan fitur lengkap seperti pembayaran online, pengelolaan produk, dan pelacakan pesanan.Sistem Manajemen Konten (CMS)Contoh: Website portal berita atau blog yang dapat diupdate dengan mudah oleh admin tanpa memerlukan pengetahuan coding.Aplikasi Layanan KesehatanContoh: Sistem booking online untuk janji temu dengan dokter, pengelolaan data pasien, dan konsultasi online. Mengapa Laravel 11 Pilihan Tepat? Laravel 11 adalah framework PHP yang sangat populer dan sering digunakan untuk membangun aplikasi web modern. Berikut beberapa alasan mengapa Laravel 11 adalah pilihan tepat untuk membuat website modern: Struktur MVC (Model-View-Controller)Memisahkan logika aplikasi, tampilan, dan data sehingga memudahkan pengembangan dan pemeliharaan.Eloquent ORMMemungkinkan manipulasi database dengan sintaks yang sederhana dan intuitif.Blade Templating EngineMenyederhanakan pembuatan dan pengelolaan tampilan dengan fitur-fitur seperti inheritance dan komponen.Artisan CLIMenyediakan command-line interface yang powerful untuk berbagai tugas rutin seperti migrasi database, seeding, dan pembuatan kontroler.MiddlewareMemudahkan penambahan lapisan keamanan dan logika lainnya tanpa mengganggu arsitektur aplikasi utama. Fitur-Fitur Laravel 11 untuk Website Modern 1. Livewire Livewire adalah framework full-stack untuk Laravel yang memungkinkan pembuatan aplikasi dinamis tanpa meninggalkan Laravel. Dengan Livewire, developer bisa membuat komponen front-end yang interaktif tanpa perlu menggunakan JavaScript secara langsung. Contoh Kode: use Livewire\\\\Component; class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function render() { return view('livewire.counter'); } } Blade Templating: <div> <button wire:click="increment">+</button> <h1>{{ $count }}</h1> </div> 2. Laravel Echo Laravel Echo memungkinkan developer untuk dengan mudah berinteraksi dengan WebSockets, memungkinkan pembuatan aplikasi real-time seperti notifikasi, chat, atau update data secara langsung di halaman pengguna. Contoh Kode: Echo.channel('orders') .listen('OrderShipped', (e) => { console.log(e.order); }); 3. Laravel Sanctum Laravel Sanctum menyediakan sistem otentikasi sederhana untuk SPAs (Single Page Applications), aplikasi mobile, dan API token. Sanctum memudahkan implementasi otentikasi dengan token API yang aman dan mudah diintegrasikan. Contoh Kode: use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Route; Route::middleware('auth:sanctum')->get('/user', function (Request $request) { return $request->user(); }); 4. Queue Laravel Queue menyediakan API yang seragam di seluruh sistem antrian yang didukung. Queue membantu mengeksekusi tugas berat di latar belakang sehingga aplikasi tetap responsif. Contoh Kode: dispatch(new SendEmailJob($user)); 5. Laravel Scout Laravel Scout adalah driver pencarian full-text yang sederhana untuk Eloquent, memungkinkan pencarian cepat dan mudah diintegrasikan ke dalam aplikasi Laravel. Contoh Kode: use App\\\\Models\\\\Post; $posts = Post::search('tutorial')->get(); image web task management 6. Task Scheduling Laravel menyediakan API yang nyaman untuk menjadwalkan tugas-tugas yang berulang. Task Scheduling memudahkan penjadwalan tugas seperti pembersihan database, pengiriman email otomatis, dan lainnya. Contoh Kode: $schedule->call(function () { DB::table('recent_users')->delete(); })->daily(); Membuat Projek Website Booking Hotel Modern Menggunakan Laravel 11 Membuat website booking hotel yang modern membutuhkan teknologi yang dapat menangani berbagai fitur canggih seperti pemesanan kamar secara real-time, manajemen pengguna, sistem pembayaran, dan notifikasi. Laravel 11 adalah pilihan yang sangat baik untuk proyek ini karena memiliki berbagai fitur yang mendukung pembuatan aplikasi web yang kompleks dan canggih. Dalam artikel ini, kita akan membahas bagaimana membangun website booking hotel modern menggunakan Laravel 11, fitur-fitur canggih yang bisa digunakan, dan contoh kodingnya. Fitur Utama Website Booking Hotel Manajemen KamarPengelolaan data kamar seperti tipe, harga, dan ketersediaan.Sistem PemesananFitur untuk pengguna memesan kamar secara real-time.Pembayaran OnlineIntegrasi dengan payment gateway untuk memproses pembayaran.NotifikasiMengirimkan notifikasi kepada pengguna melalui email atau SMS.Manajemen PenggunaRegistrasi, login, dan profil pengguna. Contoh Koding dan Implementasi Fitur 1. Manajemen Kamar Model Kamar: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Room extends Model { use HasFactory; protected $fillable = [ 'type', 'price', 'availability', ]; } Migration Kamar: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateRoomsTable extends Migration { public function up() { Schema::create('rooms', function (Blueprint $table) { $table->id(); $table->string('type'); $table->decimal('price', 8, 2); $table->boolean('availability')->default(true); $table->timestamps(); }); } public function down() { Schema::dropIfExists('rooms'); } } Controller Kamar: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Room; use Illuminate\\\\Http\\\\Request; class RoomController extends Controller { public function index() { $rooms = Room::all(); return view('rooms.index', compact('rooms')); } public function create() { return view('rooms.create'); } public function store(Request $request) { $request->validate([ 'type' => 'required', 'price' => 'required|numeric', ]); Room::create($request->all()); return redirect()->route('rooms.index') ->with('success', 'Room created successfully.'); } } 2. Sistem Pemesanan Model Pemesanan: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Booking extends Model { use HasFactory; protected $fillable = [ 'user_id', 'room_id', 'check_in', 'check_out', 'status', ]; } Migration Pemesanan: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateBookingsTable extends Migration { public function up() { Schema::create('bookings', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->constrained(); $table->foreignId('room_id')->constrained(); $table->date('check_in'); $table->date('check_out'); $table->string('status')->default('pending'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('bookings'); } } Controller Pemesanan: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Booking; use App\\\\Models\\\\Room; use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Auth; class BookingController extends Controller { public function create(Room $room) { return view('bookings.create', compact('room')); } public function store(Request $request, Room $room) { $request->validate([ 'check_in' => 'required|date', 'check_out' => 'required|date|after:check_in', ]); Booking::create([ 'user_id' => Auth::id(), 'room_id' => $room->id, 'check_in' => $request->check_in, 'check_out' => $request->check_out, 'status' => 'confirmed', ]); return redirect()->route('bookings.index') ->with('success', 'Booking created successfully.'); } public function index() { $bookings = Booking::where('user_id', Auth::id())->get(); return view('bookings.index', compact('bookings')); } } 3. Pembayaran Online Mengintegrasikan payment gateway seperti Stripe atau Midtrans untuk memproses pembayaran. Contoh Koding untuk Stripe: namespace App\\\\Http\\\\Controllers; use Illuminate\\\\Http\\\\Request; use Stripe\\\\Stripe; use Stripe\\\\Charge; class PaymentController extends Controller { public function create() { return view('payments.create'); } public function store(Request $request) { Stripe::setApiKey(env('STRIPE_SECRET')); Charge::create([ 'amount' => $request->amount * 100, 'currency' => 'usd', 'description' => 'Hotel Booking Payment', 'source' => $request->stripeToken, ]); return redirect()->route('payments.success') ->with('success', 'Payment successful.'); } public function success() { return view('payments.success'); } } 4. Notifikasi Mengirimkan notifikasi melalui email menggunakan fitur Laravel Notification. Contoh Notifikasi: namespace App\\\\Notifications; use Illuminate\\\\Bus\\\\Queueable; use Illuminate\\\\Contracts\\\\Queue\\\\ShouldQueue; use Illuminate\\\\Notifications\\\\Messages\\\\MailMessage; use Illuminate\\\\Notifications\\\\Notification; class BookingConfirmed extends Notification { use Queueable; public function __construct($booking) { $this->booking = $booking; } public function via($notifiable) { return ['mail']; } public function toMail($notifiable) { return (new MailMessage) ->line('Your booking has been confirmed.') ->action('View Booking', url('/bookings/' . $this->booking->id)) ->line('Thank you for booking with us!'); } } 5. Manajemen Pengguna Menggunakan Laravel Breeze atau Laravel Fortify untuk fitur registrasi, login, dan profil pengguna. Contoh Koding untuk Laravel Breeze: composer require laravel/breeze --dev php artisan breeze:install php artisan migrate npm install && npm run dev 6. Implementasi Queue Untuk tugas latar belakang seperti pengiriman email konfirmasi booking. Contoh Koding Queue: namespace App\\\\Jobs; use App\\\\Models\\\\Booking; use App\\\\Notifications\\\\BookingConfirmed; use Illuminate\\\\Bus\\\\Queueable; use Illuminate\\\\Contracts\\\\Queue\\\\ShouldQueue; use Illuminate\\\\Foundation\\\\Bus\\\\Dispatchable; use Illuminate\\\\Queue\\\\InteractsWithQueue; use Illuminate\\\\Queue\\\\SerializesModels; class SendBookingConfirmation implements ShouldQueue { use Dispatchable, InteractsWithQueue, Queueable, SerializesModels; protected $booking; public function __construct(Booking $booking) { $this->booking = $booking; } public function handle() { $this->booking->user->notify(new BookingConfirmed($this->booking)); } } Dispatch Job: use App\\\\Jobs\\\\SendBookingConfirmation; dispatch(new SendBookingConfirmation($booking)); Dengan menggunakan Laravel 11, membangun website booking hotel modern menjadi lebih mudah dan efisien. Laravel menyediakan berbagai fitur canggih yang mendukung pembuatan website yang aman, responsif, dan interaktif. Mulai dari manajemen kamar, sistem pemesanan, pembayaran online, notifikasi, manajemen pengguna, hingga implementasi queue untuk tugas latar belakang. Semua fitur ini membuat Laravel 11 menjadi pilihan yang sangat tepat untuk proyek website booking hotel modern. Projek Website Sewa Mobil Mewah Menggunakan Laravel 11 Membuat website sewa mobil mewah memerlukan fitur-fitur yang dapat mendukung pengelolaan kendaraan, pemesanan, pembayaran, dan keamanan pengguna. Laravel 11 adalah framework yang ideal untuk membangun aplikasi web semacam ini karena memiliki berbagai fitur canggih yang memudahkan pengembangan dan pemeliharaan aplikasi. Fitur Utama Website Sewa Mobil Mewah Manajemen KendaraanPengelolaan data mobil seperti tipe, harga sewa, dan ketersediaan.Sistem PemesananFitur untuk pengguna memesan mobil secara real-time.Pembayaran OnlineIntegrasi dengan payment gateway untuk memproses pembayaran.NotifikasiMengirimkan notifikasi kepada pengguna melalui email atau SMS.Manajemen PenggunaRegistrasi, login, dan profil pengguna. Fitur Laravel 11 untuk Website Sewa Mobil Mewah 1. Manajemen Kendaraan Model Kendaraan: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Car extends Model { use HasFactory; protected $fillable = [ 'make', 'model', 'price_per_day', 'availability', ]; } Migration Kendaraan: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateCarsTable extends Migration { public function up() { Schema::create('cars', function (Blueprint $table) { $table->id(); $table->string('make'); $table->string('model'); $table->decimal('price_per_day', 8, 2); $table->boolean('availability')->default(true); $table->timestamps(); }); } public function down() { Schema::dropIfExists('cars'); } } Controller Kendaraan: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Car; use Illuminate\\\\Http\\\\Request; class CarController extends Controller { public function index() { $cars = Car::all(); return view('cars.index', compact('cars')); } public function create() { return view('cars.create'); } public function store(Request $request) { $request->validate([ 'make' => 'required', 'model' => 'required', 'price_per_day' => 'required|numeric', ]); Car::create($request->all()); return redirect()->route('cars.index') ->with('success', 'Car created successfully.'); } } 2. Sistem Pemesanan Model Pemesanan: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Booking extends Model { use HasFactory; protected $fillable = [ 'user_id', 'car_id', 'start_date', 'end_date', 'status', ]; } Migration Pemesanan: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateBookingsTable extends Migration { public function up() { Schema::create('bookings', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->constrained(); $table->foreignId('car_id')->constrained(); $table->date('start_date'); $table->date('end_date'); $table->string('status')->default('pending'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('bookings'); } } Controller Pemesanan: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Booking; use App\\\\Models\\\\Car; use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Auth; class BookingController extends Controller { public function create(Car $car) { return view('bookings.create', compact('car')); } public function store(Request $request, Car $car) { $request->validate([ 'start_date' => 'required|date', 'end_date' => 'required|date|after:start_date', ]); Booking::create([ 'user_id' => Auth::id(), 'car_id' => $car->id, 'start_date' => $request->start_date, 'end_date' => $request->end_date, 'status' => 'confirmed', ]); return redirect()->route('bookings.index') ->with('success', 'Booking created successfully.'); } public function index() { $bookings = Booking::where('user_id', Auth::id())->get(); return view('bookings.index', compact('bookings')); } } 3. Pembayaran Online Mengintegrasikan payment gateway seperti Stripe atau Midtrans untuk memproses pembayaran. Contoh Koding untuk Stripe: namespace App\\\\Http\\\\Controllers; use Illuminate\\\\Http\\\\Request; use Stripe\\\\Stripe; use Stripe\\\\Charge; class PaymentController extends Controller { public function create() { return view('payments.create'); } public function store(Request $request) { Stripe::setApiKey(env('STRIPE_SECRET')); Charge::create([ 'amount' => $request->amount * 100, 'currency' => 'usd', 'description' => 'Car Rental Payment', 'source' => $request->stripeToken, ]); return redirect()->route('payments.success') ->with('success', 'Payment successful.'); } public function success() { return view('payments.success'); } } 4. Notifikasi Mengirimkan notifikasi melalui email menggunakan fitur Laravel Notification. Contoh Notifikasi: namespace App\\\\Notifications; use Illuminate\\\\Bus\\\\Queueable; use Illuminate\\\\Contracts\\\\Queue\\\\ShouldQueue; use Illuminate\\\\Notifications\\\\Messages\\\\MailMessage; use Illuminate\\\\Notifications\\\\Notification; class BookingConfirmed extends Notification { use Queueable; public function __construct($booking) { $this->booking = $booking; } public function via($notifiable) { return ['mail']; } public function toMail($notifiable) { return (new MailMessage) ->line('Your booking has been confirmed.') ->action('View Booking', url('/bookings/' . $this->booking->id)) ->line('Thank you for booking with us!'); } } 5. Manajemen Pengguna Menggunakan Laravel Breeze atau Laravel Fortify untuk fitur registrasi, login, dan profil pengguna. Contoh Koding untuk Laravel Breeze: composer require laravel/breeze --dev php artisan breeze:install php artisan migrate npm install && npm run dev 6. Implementasi Queue Untuk tugas latar belakang seperti pengiriman email konfirmasi booking. Contoh Koding Queue: namespace App\\\\Jobs; use App\\\\Models\\\\Booking; use App\\\\Notifications\\\\BookingConfirmed; use Illuminate\\\\Bus\\\\Queueable; use Illuminate\\\\Contracts\\\\Queue\\\\ShouldQueue; use Illuminate\\\\Foundation\\\\Bus\\\\Dispatchable; use Illuminate\\\\Queue\\\\InteractsWithQueue; use Illuminate\\\\Queue\\\\SerializesModels; class SendBookingConfirmation implements ShouldQueue { use Dispatchable, InteractsWithQueue, Queueable, SerializesModels; protected $booking; public function __construct(Booking $booking) { $this->booking = $booking; } public function handle() { $this->booking->user->notify(new BookingConfirmed($this->booking)); } } Dispatch Job: use App\\\\Jobs\\\\SendBookingConfirmation; dispatch(new SendBookingConfirmation($booking)); Laravel 11 menyediakan berbagai fitur canggih yang memudahkan pembuatan website sewa mobil mewah yang aman, responsif, dan interaktif. Dengan manajemen kendaraan, sistem pemesanan, pembayaran online, notifikasi, manajemen pengguna, dan implementasi queue, Laravel 11 adalah pilihan yang sangat tepat untuk proyek ini. Projek Website E-Commerce Menggunakan Laravel 11 Website e-commerce modern memerlukan fitur yang dapat menangani berbagai aspek seperti manajemen produk, keranjang belanja, pembayaran, dan pengiriman. Laravel 11 menyediakan berbagai fitur yang memudahkan pengembangan website e-commerce yang canggih dan responsif. Fitur Utama Website E-Commerce Manajemen ProdukPengelolaan data produk seperti deskripsi, harga, dan stok.Keranjang BelanjaFitur untuk pengguna menambahkan produk ke keranjang dan melakukan checkout.Pembayaran OnlineIntegrasi dengan payment gateway untuk memproses pembayaran.Pengelolaan PesananManajemen pesanan pengguna dari proses pemesanan hingga pengiriman.Manajemen PenggunaRegistrasi, login, dan profil pengguna. Fitur Laravel 11 untuk Website E-Commerce 1. Manajemen Produk Model Produk: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Product extends Model { use HasFactory ; protected $fillable = [ 'name', 'description', 'price', 'stock', ]; } Migration Produk: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateProductsTable extends Migration { public function up() { Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); $table->text('description'); $table->decimal('price', 8, 2); $table->integer('stock'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('products'); } } Controller Produk: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Product; use Illuminate\\\\Http\\\\Request; class ProductController extends Controller { public function index() { $products = Product::all(); return view('products.index', compact('products')); } public function create() { return view('products.create'); } public function store(Request $request) { $request->validate([ 'name' => 'required', 'description' => 'required', 'price' => 'required|numeric', 'stock' => 'required|integer', ]); Product::create($request->all()); return redirect()->route('products.index') ->with('success', 'Product created successfully.'); } } 2. Keranjang Belanja Model Keranjang: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Cart extends Model { use HasFactory; protected $fillable = [ 'user_id', 'product_id', 'quantity', ]; } Migration Keranjang: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateCartsTable extends Migration { public function up() { Schema::create('carts', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->constrained(); $table->foreignId('product_id')->constrained(); $table->integer('quantity'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('carts'); } } Controller Keranjang: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Cart; use App\\\\Models\\\\Product; use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Auth; class CartController extends Controller { public function index() { $carts = Cart::where('user_id', Auth::id())->get(); return view('carts.index', compact('carts')); } public function add(Product $product) { $cart = Cart::where('user_id', Auth::id()) ->where('product_id', $product->id) ->first(); if ($cart) { $cart->quantity++; $cart->save(); } else { Cart::create([ 'user_id' => Auth::id(), 'product_id' => $product->id, 'quantity' => 1, ]); } return redirect()->route('carts.index') ->with('success', 'Product added to cart.'); } public function remove(Cart $cart) { $cart->delete(); return redirect()->route('carts.index') ->with('success', 'Product removed from cart.'); } } 3. Pembayaran Online Mengintegrasikan payment gateway seperti Stripe atau Midtrans untuk memproses pembayaran. Contoh Koding untuk Stripe: namespace App\\\\Http\\\\Controllers; use Illuminate\\\\Http\\\\Request; use Stripe\\\\Stripe; use Stripe\\\\Charge; class PaymentController extends Controller { public function create() { return view('payments.create'); } public function store(Request $request) { Stripe::setApiKey(env('STRIPE_SECRET')); Charge::create([ 'amount' => $request->amount * 100, 'currency' => 'usd', 'description' => 'E-Commerce Payment', 'source' => $request->stripeToken, ]); return redirect()->route('payments.success') ->with('success', 'Payment successful.'); } public function success() { return view('payments.success'); } } 4. Pengelolaan Pesanan Model Pesanan: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Order extends Model { use HasFactory; protected $fillable = [ 'user_id', 'total_amount', 'status', ]; } Migration Pesanan: use Illuminate\\\\Database\\\\Migrations\\\\Migration; use Illuminate\\\\Database\\\\Schema\\\\Blueprint; use Illuminate\\\\Support\\\\Facades\\\\Schema; class CreateOrdersTable extends Migration { public function up() { Schema::create('orders', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->constrained(); $table->decimal('total_amount', 8, 2); $table->string('status')->default('pending'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('orders'); } } Controller Pesanan: namespace App\\\\Http\\\\Controllers; use App\\\\Models\\\\Order; use App\\\\Models\\\\Cart; use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Auth; class OrderController extends Controller { public function create() { $carts = Cart::where('user_id', Auth::id())->get(); $totalAmount = $carts->sum(function($cart) { return $cart->product->price * $cart->quantity; }); return view('orders.create', compact('carts', 'totalAmount')); } public function store(Request $request) { $carts = Cart::where('user_id', Auth::id())->get(); $totalAmount = $carts->sum(function($cart) { return $cart->product->price * $cart->quantity; }); $order = Order::create([ 'user_id' => Auth::id(), 'total_amount' => $totalAmount, 'status' => 'confirmed', ]); foreach ($carts as $cart) { $order->products()->attach($cart->product_id, ['quantity' => $cart->quantity]); $cart->delete(); } return redirect()->route('orders.index') ->with('success', 'Order created successfully.'); } public function index() { $orders = Order::where('user_id', Auth::id())->get(); return view('orders.index', compact('orders')); } } 5. Manajemen Pengguna Menggunakan Laravel Breeze atau Laravel Fortify untuk fitur registrasi, login, dan profil pengguna. Contoh Koding untuk Laravel Breeze: composer require laravel/breeze --dev php artisan breeze:install php artisan migrate npm install && npm run dev 6. Implementasi Queue Untuk tugas latar belakang seperti pengiriman email konfirmasi pesanan. Contoh Koding Queue: namespace App\\\\Jobs; use App\\\\Models\\\\Order; use App\\\\Notifications\\\\OrderConfirmed; use Illuminate\\\\Bus\\\\Queueable; use Illuminate\\\\Contracts\\\\Queue\\\\ShouldQueue; use Illuminate\\\\Foundation\\\\Bus\\\\Dispatchable; use Illuminate\\\\Queue\\\\InteractsWithQueue; use Illuminate\\\\Queue\\\\SerializesModels; class SendOrderConfirmation implements ShouldQueue { use Dispatchable, InteractsWithQueue, Queueable, SerializesModels; protected $order; public function __construct(Order $order) { $this->order = $order; } public function handle() { $this->order->user->notify(new OrderConfirmed($this->order)); } } Dispatch Job: use App\\\\Jobs\\\\SendOrderConfirmation; dispatch(new SendOrderConfirmation($order)); Dengan menggunakan Laravel 11, membangun website e-commerce modern menjadi lebih mudah dan efisien. Laravel menyediakan berbagai fitur canggih yang mendukung pembuatan website yang aman, responsif, dan interaktif. Mulai dari manajemen produk, keranjang belanja, pembayaran online, pengelolaan pesanan, hingga manajemen pengguna. Semua fitur ini membuat Laravel 11 menjadi pilihan yang sangat tepat untuk proyek website e-commerce modern. Saran untuk Programmer Pemula Pelajari Dasar-Dasar LaravelSebelum melangkah ke proyek yang lebih kompleks, pastikan Anda memahami dasar-dasar Laravel, seperti routing, controllers, views, dan Eloquent ORM. Dokumentasi Laravel adalah sumber yang sangat bagus untuk memulai.Buat Proyek Kecil Terlebih DahuluMulailah dengan proyek kecil untuk membangun kepercayaan diri dan keterampilan Anda. Proyek kecil seperti blog sederhana atau aplikasi to-do list bisa menjadi latihan yang baik.Ikuti Tutorial dan Kursus OnlineAda banyak tutorial dan kursus online yang tersedia untuk mempelajari Laravel. Memanfaatkan sumber daya ini dapat membantu Anda belajar dengan lebih terstruktur.Praktek Secara KonsistenLatihan adalah kunci untuk menguasai pemrograman. Cobalah untuk menyisihkan waktu setiap hari untuk berlatih dan mengerjakan proyek Anda.Bergabung dengan KomunitasBergabung dengan komunitas developer, baik online maupun offline, dapat memberikan Anda dukungan, tips, dan trik dari sesama developer.Cari Mentor atau Bergabung dengan Program Belajar TerstrukturBelajar dari mentor yang berpengalaman dapat mempercepat proses belajar Anda. Mentor dapat memberikan umpan balik konstruktif dan membantu Anda mengatasi hambatan yang mungkin Anda hadapi. Belajar dari Mentor Expert Buildwithangga Jika Anda mencari mentor yang berpengalaman dan program belajar yang terstruktur, Buildwithangga adalah pilihan yang sangat baik. Berikut adalah beberapa keuntungan belajar di Buildwithangga: Akses Seumur HidupDengan mendaftar di Buildwithangga, Anda mendapatkan akses seumur hidup ke semua kursus yang Anda ambil. Ini berarti Anda dapat belajar sesuai kecepatan Anda sendiri dan mengulang materi kapan saja Anda butuhkan.Visual Design Berkualitas TinggiBuildwithangga dikenal dengan visual design yang berkualitas tinggi. Materi yang disajikan tidak hanya informatif tetapi juga menarik secara visual, sehingga memudahkan pemahaman konsep-konsep yang diajarkan.Portofolio Siap KerjaKursus di Buildwithangga dirancang untuk membantu Anda membangun portofolio yang siap untuk dunia kerja. Anda akan belajar dengan mengerjakan proyek nyata yang bisa Anda tunjukkan kepada calon pemberi kerja. Dengan memanfaatkan sumber daya yang tersedia di Buildwithangga, Anda bisa mendapatkan bimbingan dari mentor expert, belajar dengan materi berkualitas tinggi, dan membangun portofolio yang solid. Semua ini akan membantu Anda menjadi developer yang kompeten dan siap untuk tantangan di dunia kerja. Maka, jangan ragu untuk mulai belajar dan mengembangkan keterampilan Anda dengan Buildwithangga. Selamat belajar dan semoga sukses dalam perjalanan Anda menjadi developer profesional!

Email verification adalah fitur yang sangat penting pada sebuah website. Dengan fitur ini, kita dapat memastikan bahwa pengguna yang mendaftar benar-benar menggunakan alamat email yang valid dan dapat dihubungi. Ini sangat penting untuk mencegah pendaftaran dengan email palsu atau spam, dan juga memberikan lapisan keamanan tambahan untuk pengguna. Mengapa Verifikasi Email Penting? Mencegah Spam: Dengan verifikasi email, kita dapat memastikan bahwa pengguna menggunakan email yang valid. Ini membantu mengurangi spam dan pendaftaran yang tidak diinginkan.Keamanan: Verifikasi email membantu dalam memastikan bahwa pengguna yang mendaftar adalah orang yang memiliki akses ke email tersebut. Ini menambah lapisan keamanan pada akun pengguna.Komunikasi: Dengan email yang terverifikasi, kita dapat memastikan bahwa kita bisa menghubungi pengguna untuk tujuan penting seperti reset password, pemberitahuan, dan lainnya. Mengenal Laravel Breeze Laravel Breeze adalah sebuah package yang mempermudah developer dalam mengimplementasikan fitur authentication pada aplikasi Laravel. Breeze menyediakan semua fitur dasar seperti login, register, reset password, dan juga verifikasi email dengan cepat dan mudah. Keuntungan Menggunakan Laravel Breeze: Cepat dan Mudah: Breeze menyediakan scaffold yang siap pakai untuk fitur authentication.Terintegrasi dengan Laravel: Breeze dibuat oleh tim Laravel sehingga integrasinya sangat baik dengan framework ini.Sederhana dan Minimalis: Breeze dirancang dengan kesederhanaan dan minimalisme, membuatnya mudah dipahami dan dikustomisasi. Mengaktifkan Fitur Verifikasi Email dengan Laravel Breeze (Laravel 11) Untuk mengaktifkan fitur verifikasi email di Laravel 11 dengan menggunakan Breeze, ikuti langkah-langkah berikut: 1) Install Laravel Breeze: composer require laravel/breeze --dev php artisan breeze:install npm install && npm run dev php artisan migrate 2) Menambahkan Middleware Verifikasi Email: Di Laravel 11, middleware tidak lagi didefinisikan di file app/Http/Kernel.php. Sebagai gantinya, middleware dapat ditambahkan langsung di file rute atau di controller. Berikut adalah cara menambahkan middleware verifikasi email: 3) Update Rute untuk Verifikasi Email: Pada file routes/web.php, tambahkan rute untuk verifikasi email: use Illuminate\\\\Foundation\\\\Auth\\\\EmailVerificationRequest; use Illuminate\\\\Http\\\\Request; use Illuminate\\\\Support\\\\Facades\\\\Route; // Email Verification Notice Route::get('/email/verify', function () { return view('auth.verify-email'); })->middleware('auth')->name('verification.notice'); // Email Verification Handler Route::get('/email/verify/{id}/{hash}', function (EmailVerificationRequest $request) { $request->fulfill(); return redirect('/home'); })->middleware(['auth', 'signed'])->name('verification.verify'); // Resend Verification Email Route::post('/email/verification-notification', function (Request $request) { $request->user()->sendEmailVerificationNotification(); return back()->with('message', 'Verification link sent!'); })->middleware(['auth', 'throttle:6,1'])->name('verification.send'); 4) Update Model User: Pastikan model User menggunakan trait MustVerifyEmail: use Illuminate\\\\Contracts\\\\Auth\\\\MustVerifyEmail; class User extends Authenticatable implements MustVerifyEmail { // ... } 5) Mengupdate Blade Template: Update template Blade untuk menampilkan pesan verifikasi email. Misalnya pada halaman dashboard: @if (session('status') == 'verification-link-sent') <div class="mb-4 font-medium text-sm text-green-600"> A new verification link has been sent to your email address. </div> @endif @if (Auth::user()->hasVerifiedEmail()) <p>Email kamu sudah diverifikasi.</p> @else <p>Email kamu belum diverifikasi. <a href="{{ route('verification.send') }}">Klik di sini untuk kirim ulang verifikasi</a>.</p> @endif Contoh Proyek yang Membutuhkan Fitur Verifikasi Email E-commerce: Pada situs e-commerce, verifikasi email penting untuk memastikan bahwa informasi yang dikirimkan kepada pengguna seperti faktur, konfirmasi pesanan, dan informasi pengiriman diterima oleh pengguna yang sah. Contoh Kode: // routes/web.php use App\\\\Http\\\\Controllers\\\\OrderController; use Illuminate\\\\Support\\\\Facades\\\\Route; Route::middleware(['auth', 'verified'])->group(function () { Route::get('/orders', [OrderController::class, 'index'])->name('orders.index'); Route::get('/orders/{order}', [OrderController::class, 'show'])->name('orders.show'); }); // OrderController.php namespace App\\\\Http\\\\Controllers; use Illuminate\\\\Http\\\\Request; use App\\\\Models\\\\Order; class OrderController extends Controller { public function index() { $orders = auth()->user()->orders; return view('orders.index', compact('orders')); } public function show(Order $order) { return view('orders.show', compact('order')); } } Aplikasi Pendidikan: Dalam platform e-learning, memastikan bahwa pengguna yang mendaftar adalah pengguna yang valid sangat penting untuk menjaga kualitas interaksi dan komunikasi antara pengajar dan siswa. Contoh Kode: // routes/web.php use App\\\\Http\\\\Controllers\\\\CourseController; use Illuminate\\\\Support\\\\Facades\\\\Route; Route::middleware(['auth', 'verified'])->group(function () { Route::get('/courses', [CourseController::class, 'index'])->name('courses.index'); Route::get('/courses/{course}', [CourseController::class, 'show'])->name('courses.show'); }); // CourseController.php namespace App\\\\Http\\\\Controllers; use Illuminate\\\\Http\\\\Request; use App\\\\Models\\\\Course; class CourseController extends Controller { public function index() { $courses = Course::all(); return view('courses.index', compact('courses')); } public function show(Course $course) { return view('courses.show', compact('course')); } } Aplikasi Sosial Media: Pada aplikasi sosial media, verifikasi email membantu dalam menjaga integritas dan keaslian komunitas dengan memastikan bahwa setiap akun yang dibuat menggunakan email yang valid. Contoh Kode: // routes/web.php use App\\\\Http\\\\Controllers\\\\ProfileController; use Illuminate\\\\Support\\\\Facades\\\\Route; Route::middleware(['auth', 'verified'])->group(function () { Route::get('/profile', [ProfileController::class, 'show'])->name('profile.show'); Route::post('/profile', [ProfileController::class, 'update'])->name('profile.update'); }); // ProfileController.php namespace App\\\\Http\\\\Controllers; use Illuminate\\\\Http\\\\Request; class ProfileController extends Controller { public function show() { $user = auth()->user(); return view('profile.show', compact('user')); } public function update(Request $request) { $request->validate([ 'name' => 'required|string|max:255', 'bio' => 'nullable|string|max:500', ]); $user = auth()->user(); $user->update($request->all()); return redirect()->route('profile.show')->with('status', 'Profile updated!'); } } Pada ketiga contoh di atas, middleware verified digunakan untuk memastikan bahwa hanya pengguna yang telah memverifikasi email mereka yang dapat mengakses rute tertentu. Hal ini penting untuk memastikan bahwa pengguna yang mengakses informasi sensitif atau melakukan tindakan tertentu adalah pengguna yang sah. Contoh Proyek yang Membutuhkan Fitur Verifikasi Email E-commerce: Pada situs e-commerce, verifikasi email penting untuk memastikan bahwa informasi yang dikirimkan kepada pengguna seperti faktur, konfirmasi pesanan, dan informasi pengiriman diterima oleh pengguna yang sah.Aplikasi Pendidikan: Dalam platform e-learning, memastikan bahwa pengguna yang mendaftar adalah pengguna yang valid sangat penting untuk menjaga kualitas interaksi dan komunikasi antara pengajar dan siswa.Aplikasi Sosial Media: Pada aplikasi sosial media, verifikasi email membantu dalam menjaga integritas dan keaslian komunitas dengan memastikan bahwa setiap akun yang dibuat menggunakan email yang valid. Belajar dengan Mentor di BuildWithAngga Jika Anda ingin mendalami lebih lanjut tentang Laravel dan fitur-fitur lainnya, belajar dengan mentor di BuildWithAngga bisa menjadi pilihan yang tepat. BuildWithAngga adalah platform pembelajaran yang menawarkan berbagai kursus online dengan kualitas tinggi, disertai dengan bimbingan langsung dari mentor-mentor berpengalaman. Berikut adalah beberapa keuntungan yang bisa Anda dapatkan dengan belajar di BuildWithAngga: Akses Seumur Hidup: Setelah membeli kursus di BuildWithAngga, Anda akan mendapatkan akses seumur hidup ke materi pembelajaran. Ini berarti Anda dapat kembali dan meninjau materi kapan saja, tanpa batasan waktu. Akses seumur hidup ini sangat bermanfaat untuk memperkuat pemahaman Anda dan tetap up-to-date dengan perkembangan terbaru di bidang Laravel dan teknologi lainnya. Bonus Konsultasi: BuildWithAngga menawarkan bonus konsultasi dengan mentor bagi para siswa. Kesempatan ini memungkinkan Anda untuk mendapatkan bimbingan langsung dari para ahli yang berpengalaman di industri. Anda dapat bertanya tentang berbagai hal, mulai dari masalah teknis dalam proyek Anda hingga saran karier dan pengembangan profesional. Grup Diskusi: Sebagai bagian dari komunitas BuildWithAngga, Anda akan bergabung dengan grup diskusi yang aktif antar siswa. Grup ini adalah tempat yang sempurna untuk saling berbagi ilmu, bertukar pengalaman, dan membantu satu sama lain dalam mengatasi tantangan pembelajaran. Diskusi yang kolaboratif ini akan memperkaya proses belajar Anda dan membuka kesempatan untuk networking dengan sesama developer. Persiapan Kerja: Materi di BuildWithAngga disusun untuk membantu Anda siap terjun ke dunia kerja dengan skill yang matang. Kursus-kursus dirancang berdasarkan kebutuhan industri, sehingga Anda akan mempelajari keterampilan yang relevan dan dicari oleh perusahaan. Selain itu, Anda juga akan mendapatkan tips dan trik dalam mempersiapkan diri untuk wawancara kerja, membangun portfolio, dan meningkatkan peluang karier Anda di bidang web development. Dengan berbagai keuntungan di atas, belajar di BuildWithAngga tidak hanya membantu Anda menguasai Laravel dan teknologi lainnya, tetapi juga memberikan dukungan yang Anda butuhkan untuk sukses dalam karier Anda sebagai developer. Bergabunglah dengan BuildWithAngga dan rasakan manfaatnya secara langsung!

Dalam dunia web development, memberikan pelayanan terbaik kepada pengguna adalah kunci kesuksesan sebuah website. Website yang canggih memiliki banyak fitur yang dirancang untuk meningkatkan user experience (UX) dan pada akhirnya mendukung pertumbuhan bisnis online. Salah satu fitur penting yang sering diimplementasikan dalam website adalah Role Based Access Control (RBAC). Pengantar Pentingnya User Experience Ketika mengunjungi sebuah website, pengguna mengharapkan pengalaman yang mudah dan menyenangkan. UX yang baik tidak hanya membuat pengguna betah, tetapi juga dapat meningkatkan konversi dan loyalitas pelanggan. Bayangkan sebuah toko fisik dengan layanan pelanggan yang buruk—pelanggan akan enggan kembali. Hal yang sama berlaku untuk website. UX yang baik dapat membuat pengguna merasa dihargai dan lebih mungkin untuk melakukan transaksi atau kembali di masa mendatang. Apa itu Role Based Access Control (RBAC)? Role Based Access Control (RBAC) adalah metode pengelolaan hak akses pengguna yang didasarkan pada peran atau posisi mereka dalam sebuah organisasi atau sistem. Konsep ini sangat penting dalam pengembangan web modern karena memungkinkan kita untuk mengatur siapa yang dapat melakukan apa berdasarkan peran yang diberikan kepada mereka. Ini mirip dengan bagaimana sebuah perusahaan menetapkan tanggung jawab dan akses berdasarkan jabatan atau posisi karyawan. Keamanan adalah salah satu aspek terpenting dari RBAC. Dalam sistem yang menggunakan RBAC, hanya pengguna dengan peran tertentu yang dapat mengakses atau mengubah informasi sensitif. Bayangkan sebuah bank di mana hanya manajer yang memiliki akses ke brankas. Dengan cara ini, risiko kebocoran data atau penyalahgunaan informasi dapat diminimalkan. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; // Membuat role dan permission $roleAdmin = Role::create(['name' => 'admin']); $roleUser = Role::create(['name' => 'user']); $permissionViewSensitiveData = Permission::create(['name' => 'view sensitive data']); $permissionEditSensitiveData = Permission::create(['name' => 'edit sensitive data']); // Memberikan permission ke role $roleAdmin->givePermissionTo(['view sensitive data', 'edit sensitive data']); $roleUser->givePermissionTo(['view sensitive data']); // Menetapkan role ke pengguna $user = User::find(1); $user->assignRole('admin'); Dalam contoh di atas, pengguna dengan peran admin memiliki izin untuk melihat dan mengedit data sensitif, sementara pengguna dengan peran user hanya memiliki izin untuk melihat data sensitif. Dengan cara ini, akses ke data sensitif dikontrol dengan ketat. Pengelolaan yang Efisien Dengan RBAC, mengelola hak akses menjadi lebih efisien. Daripada mengatur izin untuk setiap pengguna secara individual, kita cukup mengatur izin berdasarkan peran. Ketika ada perubahan dalam struktur organisasi atau tanggung jawab, kita hanya perlu memperbarui peran, bukan setiap pengguna. Analogi: Bayangkan sebuah gedung perkantoran dengan berbagai departemen. Setiap departemen memiliki akses ke area tertentu. Ketika seorang karyawan dipindahkan dari satu departemen ke departemen lain, cukup ubah akses mereka sesuai dengan departemen baru. Tidak perlu mengatur ulang akses satu per satu. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; use App\\\\Models\\\\User; // Membuat role baru $roleManager = Role::create(['name' => 'manager']); // Memberikan permission ke role baru $permissionApproveTransactions = Permission::create(['name' => 'approve transactions']); $roleManager->givePermissionTo(['approve transactions']); // Menetapkan role ke pengguna $user = User::find(2); $user->assignRole('manager'); Dalam contoh ini, ketika kita membuat peran baru 'manager' dan memberikan izin yang sesuai, pengguna yang dipindahkan ke peran manager akan otomatis mendapatkan semua izin yang diperlukan tanpa perlu pengaturan individual. Kepatuhan RBAC juga membantu memastikan bahwa akses data sesuai dengan kebijakan dan regulasi yang berlaku. Ini sangat penting dalam industri yang diatur ketat seperti keuangan, kesehatan, dan pemerintahan. Dengan RBAC, kita dapat memastikan bahwa hanya pengguna yang berwenang yang memiliki akses ke data tertentu, sesuai dengan standar kepatuhan yang diperlukan. Analogi: Bayangkan sebuah rumah sakit di mana hanya dokter yang memiliki akses ke rekam medis pasien. Perawat dan staf administrasi memiliki akses terbatas sesuai dengan tugas mereka. Ini memastikan bahwa data sensitif pasien hanya diakses oleh mereka yang benar-benar membutuhkannya untuk pekerjaan mereka. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; use App\\\\Models\\\\User; // Membuat role dan permission $roleDoctor = Role::create(['name' => 'doctor']); $roleNurse = Role::create(['name' => 'nurse']); $permissionViewMedicalRecords = Permission::create(['name' => 'view medical records']); $permissionEditMedicalRecords = Permission::create(['name' => 'edit medical records']); // Memberikan permission ke role $roleDoctor->givePermissionTo(['view medical records', 'edit medical records']); $roleNurse->givePermissionTo(['view medical records']); // Menetapkan role ke pengguna $userDoctor = User::find(3); $userDoctor->assignRole('doctor'); $userNurse = User::find(4); $userNurse->assignRole('nurse'); Dalam contoh di atas, dokter memiliki izin untuk melihat dan mengedit rekam medis, sedangkan perawat hanya memiliki izin untuk melihat rekam medis. Ini memastikan bahwa data sensitif dikelola sesuai dengan kebijakan dan regulasi yang berlaku. Implementasi RBAC dalam Proyek Laravel Mengimplementasikan RBAC dalam proyek Laravel sangat efisien menggunakan Spatie Laravel Permission package. Package ini menyediakan semua fitur yang diperlukan untuk mengelola role dan permission dengan mudah. Langkah-langkah Implementasi: 1) Instalasi Package: composer require spatie/laravel-permission 2) Publikasikan dan Jalankan Migrasi: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" php artisan migrate 3) Konfigurasi Role dan Permission: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; public function run() { $roleAdmin = Role::create(['name' => 'admin']); $roleUser = Role::create(['name' => 'user']); $permissionViewSensitiveData = Permission::create(['name' => 'view sensitive data']); $permissionEditSensitiveData = Permission::create(['name' => 'edit sensitive data']); $roleAdmin->givePermissionTo(['view sensitive data', 'edit sensitive data']); $roleUser->givePermissionTo(['view sensitive data']); } 4) Menggunakan Middleware untuk Hak Akses: Route::group(['middleware' => ['role:admin']], function () { Route::get('/admin/dashboard', [AdminController::class, 'index']); }); Route::group(['middleware' => ['role:user']], function () { Route::get('/user/dashboard', [UserController::class, 'index']); }); 5) Menetapkan Role dan Permission pada Pengguna: use App\\\\Models\\\\User; use Spatie\\\\Permission\\\\Models\\\\Role; $user = User::find(1); $user->assignRole('admin'); Dengan langkah-langkah ini, kita dapat dengan mudah mengelola hak akses pengguna berdasarkan peran mereka, memastikan keamanan, efisiensi pengelolaan, dan kepatuhan terhadap kebijakan yang berlaku. Peran Umum dalam RBAC Setiap website biasanya memiliki beberapa peran yang berbeda. Beberapa peran umum yang sering ditemui adalah: Super Admin: Memiliki akses penuh dan dapat mengelola seluruh aspek website.Customer: Pengguna biasa yang dapat melihat dan membeli produk atau layanan.Manager: Memiliki hak akses untuk mengelola konten atau produk, tetapi tidak memiliki akses penuh seperti Super Admin.Editor: Bertugas mengelola konten, tetapi dengan hak akses terbatas dibandingkan Manager. Dengan menerapkan RBAC, kita dapat memastikan bahwa setiap pengguna hanya memiliki akses yang sesuai dengan tanggung jawab mereka. Ini tidak hanya meningkatkan keamanan tetapi juga efisiensi operasional. Personalisasi: Konten yang Relevan bagi Pengguna Salah satu keuntungan utama dari RBAC adalah kemampuannya untuk mempersonalisasi pengalaman pengguna. Dalam sebuah website dengan berbagai tipe pengguna, seperti super admin, manager, dan customer, setiap peran memiliki kebutuhan dan akses yang berbeda. Dengan RBAC, kita dapat memastikan bahwa setiap pengguna hanya melihat dan berinteraksi dengan konten yang relevan bagi mereka. Ini mirip dengan bagaimana sebuah toko besar memiliki area khusus untuk berbagai jenis pelanggan: area VIP untuk pelanggan premium, area reguler untuk pelanggan umum, dan area khusus untuk staf. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; public function boot() { $roleSuperAdmin = Role::create(['name' => 'super-admin']); $roleManager = Role::create(['name' => 'manager']); $roleCustomer = Role::create(['name' => 'customer']); $permissionViewDashboard = Permission::create(['name' => 'view dashboard']); $permissionManageUsers = Permission::create(['name' => 'manage users']); $permissionViewProducts = Permission::create(['name' => 'view products']); $roleSuperAdmin->givePermissionTo($permissionViewDashboard, $permissionManageUsers, $permissionViewProducts); $roleManager->givePermissionTo($permissionViewDashboard, $permissionViewProducts); $roleCustomer->givePermissionTo($permissionViewProducts); } Dalam contoh di atas, kita menentukan bahwa hanya super admin yang memiliki hak akses penuh, termasuk melihat dashboard dan mengelola pengguna. Manager memiliki akses terbatas pada dashboard dan produk, sementara customer hanya dapat melihat produk. Ini memastikan bahwa setiap pengguna hanya melihat apa yang relevan dengan peran mereka, membuat pengalaman mereka lebih fokus dan efisien. Keamanan Data: Mengurangi Risiko Kebocoran Data Keamanan data adalah salah satu aspek terpenting dalam pengelolaan website, terutama yang mengelola informasi sensitif. Dengan RBAC, kita dapat mengurangi risiko kebocoran data dengan membatasi akses berdasarkan peran. Sebagai analogi, bayangkan sebuah perusahaan dengan berbagai departemen: hanya staf keuangan yang memiliki akses ke informasi keuangan perusahaan, sementara staf pemasaran tidak memiliki akses tersebut. Ini memastikan bahwa data sensitif hanya dapat diakses oleh mereka yang benar-benar membutuhkannya. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; use App\\\\Models\\\\User; // Membuat role dan permission $roleSuperAdmin = Role::create(['name' => 'super-admin']); $roleManager = Role::create(['name' => 'manager']); $roleCustomer = Role::create(['name' => 'customer']); $permissionManageSensitiveData = Permission::create(['name' => 'manage sensitive data']); // Memberikan permission ke role $roleSuperAdmin->givePermissionTo($permissionManageSensitiveData); // Menetapkan role ke pengguna $user = User::find(1); // misalkan pengguna dengan ID 1 adalah super admin $user->assignRole('super-admin'); Pada contoh di atas, hanya pengguna dengan peran super admin yang memiliki izin untuk mengelola data sensitif. Hal ini memastikan bahwa data penting tidak akan diakses oleh pihak yang tidak berwenang, mengurangi risiko kebocoran data yang bisa merugikan perusahaan. Efisiensi Operasional: Hak Akses yang Tepat Sesuai Peran Dengan RBAC, tim dapat bekerja lebih efektif dan efisien karena setiap anggota tim hanya memiliki akses yang mereka butuhkan untuk menyelesaikan tugas mereka. Ini mirip dengan bagaimana sebuah perusahaan memiliki departemen yang berbeda dengan tanggung jawab yang spesifik. Misalnya, departemen IT bertanggung jawab atas manajemen teknologi, sementara departemen HR mengelola sumber daya manusia. Dengan membagi hak akses berdasarkan peran, setiap departemen dapat fokus pada tugas mereka tanpa terganggu oleh akses yang tidak relevan. Contoh Koding: // Middleware untuk mengontrol akses berdasarkan role Route::group(['middleware' => ['role:manager']], function () { Route::get('/manager/dashboard', [ManagerController::class, 'index']); Route::post('/manager/create-product', [ProductController::class, 'store']); }); Route::group(['middleware' => ['role:customer']], function () { Route::get('/products', [ProductController::class, 'index']); Route::post('/cart/add', [CartController::class, 'store']); }); Dalam contoh ini, route yang berkaitan dengan manajer dan pelanggan dipisahkan berdasarkan middleware role. Manager hanya dapat mengakses dashboard dan menambah produk, sementara pelanggan hanya dapat melihat produk dan menambahkannya ke keranjang. Ini memastikan bahwa setiap pengguna fokus pada tugas yang sesuai dengan peran mereka, meningkatkan efisiensi operasional. Kepuasan Pengguna: Rasa Aman dan Dihargai RBAC dapat meningkatkan kepuasan pengguna dengan memberikan rasa aman dan membuat mereka merasa dihargai. Pengguna yang tahu bahwa data mereka aman dan mereka hanya mendapatkan akses yang relevan akan merasa lebih nyaman dan percaya terhadap website tersebut. Ini mirip dengan bagaimana pelanggan merasa aman di toko yang memiliki sistem keamanan yang baik dan layanan yang ramah. Contoh Koding: // Middleware untuk mengarahkan pengguna berdasarkan role setelah login public function authenticated(Request $request, $user) { if ($user->hasRole('super-admin')) { return redirect('/admin/dashboard'); } elseif ($user->hasRole('manager')) { return redirect('/manager/dashboard'); } elseif ($user->hasRole('customer')) { return redirect('/home'); } } Pada contoh di atas, setelah pengguna login, mereka akan diarahkan ke dashboard yang sesuai dengan peran mereka. Ini memberikan pengalaman yang disesuaikan dan memastikan bahwa pengguna merasa dihargai dan aman. Cara Menerapkan RBAC pada Proyek Laravel 11: Studi Kasus Sewa Mobil Untuk menerapkan RBAC pada proyek Laravel 11, kita bisa menggunakan package Spatie. Berikut adalah langkah-langkah dan contoh implementasinya: 1. Instalasi Spatie Laravel Permission Pertama, kita perlu menginstal package Spatie Laravel Permission menggunakan composer: composer require spatie/laravel-permission 2. Publikasikan dan Jalankan Migrasi Setelah instalasi, kita perlu mempublikasikan dan menjalankan migrasi untuk membuat tabel yang diperlukan: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" php artisan migrate 3. Konfigurasi Role dan Permission Kita dapat mulai mendefinisikan role dan permission dalam database seeder. Berikut contoh kode untuk membuat role dan permission: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; public function run() { $roleSuperAdmin = Role::create(['name' => 'super-admin']); $roleManager = Role::create(['name' => 'manager']); $roleCustomer = Role::create(['name' => 'customer']); $permissionCreateCar = Permission::create(['name' => 'create car']); $permissionEditCar = Permission::create(['name' => 'edit car']); $permissionDeleteCar = Permission::create(['name' => 'delete car']); $roleSuperAdmin->givePermissionTo($permissionCreateCar, $permissionEditCar, $permissionDeleteCar); $roleManager->givePermissionTo($permissionCreateCar, $permissionEditCar); } 4. Menggunakan Middleware untuk Hak Akses Untuk membatasi akses pada route tertentu berdasarkan peran, kita dapat menggunakan middleware. Berikut contoh penggunaan middleware dalam route: Route::group(['middleware' => ['role:super-admin']], function () { Route::get('/admin/dashboard', [AdminController::class, 'index']); }); 5. Menetapkan Role dan Permission pada Pengguna Kita juga perlu menetapkan role dan permission pada pengguna saat registrasi atau melalui panel admin. Berikut contoh kode untuk menetapkan role pada pengguna: use App\\\\Models\\\\User; use Spatie\\\\Permission\\\\Models\\\\Role; $user = User::find(1); $user->assignRole('super-admin'); Kesalahan Umum dalam Menerapkan RBAC pada Laravel 11 Menerapkan Role Based Access Control (RBAC) pada proyek Laravel 11 bisa menjadi tantangan tersendiri, terutama bagi developer pemula. Terdapat beberapa kesalahan umum yang sering terjadi dalam proses implementasi ini. Mari kita bahas dengan lebih mendetail, disertai analogi dan contoh koding untuk memberikan pemahaman yang lebih baik. 1. Tidak Memperbarui Hak Akses Secara Berkala Salah satu kesalahan utama adalah tidak memperbarui atau mengevaluasi hak akses pengguna secara berkala. Setiap organisasi atau proyek bisa mengalami perubahan dalam struktur dan tanggung jawab, dan hak akses perlu disesuaikan dengan perubahan tersebut. Mengabaikan hal ini bisa mengakibatkan pengguna memiliki hak akses yang tidak sesuai dengan peran mereka saat ini. Analogi: Bayangkan sebuah perusahaan yang mengalami restrukturisasi. Jika akses kunci ruangan tidak diperbarui, staf yang seharusnya tidak lagi memiliki akses ke ruangan tertentu tetap bisa masuk. Ini bisa menimbulkan risiko keamanan. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; use App\\\\Models\\\\User; public function updatePermissions() { // Misalkan ada perubahan dalam peran manajer $manager = Role::findByName('manager'); // Hapus semua permission lama $manager->syncPermissions([]); // Berikan permission baru sesuai dengan peran yang telah berubah $permissionCreateReport = Permission::findByName('create report'); $permissionViewDashboard = Permission::findByName('view dashboard'); $manager->givePermissionTo([$permissionCreateReport, $permissionViewDashboard]); // Update permissions untuk pengguna dengan role manager $users = User::role('manager')->get(); foreach ($users as $user) { $user->syncPermissions([$permissionCreateReport, $permissionViewDashboard]); } } 2. Memberikan Hak Akses Terlalu Banyak Kesalahan lain yang sering terjadi adalah memberikan hak akses yang berlebihan kepada pengguna yang tidak memerlukannya. Ini bisa menimbulkan risiko keamanan yang signifikan. Hak akses harus diberikan berdasarkan kebutuhan, bukan keinginan pengguna. Analogi: Seperti memberikan kunci ke semua ruangan dalam gedung kepada semua staf, padahal sebagian besar hanya membutuhkan akses ke ruang kerja mereka sendiri. Ini bisa menyebabkan kebocoran informasi atau penyalahgunaan fasilitas. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; use App\\\\Models\\\\User; public function assignPermissions() { // Mengidentifikasi hak akses yang diperlukan $roleEmployee = Role::findByName('employee'); $permissionViewProjects = Permission::findByName('view projects'); // Pastikan hanya memberikan permission yang diperlukan $roleEmployee->syncPermissions([$permissionViewProjects]); // Assign permission kepada pengguna $user = User::find(1); // misal pengguna dengan ID 1 $user->assignRole('employee'); } 3. Mengabaikan Logging dan Monitoring Tidak mencatat dan memonitor aktivitas yang berkaitan dengan perubahan hak akses adalah kesalahan serius. Logging dan monitoring penting untuk mengidentifikasi dan mengatasi potensi masalah keamanan secara dini. Analogi: Seperti tidak memasang kamera keamanan di gedung yang penuh dengan barang berharga. Ketika terjadi pencurian, tidak ada cara untuk melacak siapa yang melakukannya. Contoh Koding: use Illuminate\\\\Support\\\\Facades\\\\Log; use Spatie\\\\Permission\\\\Models\\\\Role; use App\\\\Models\\\\User; public function logPermissionChanges() { // Misal ada perubahan permission pada role manager $roleManager = Role::findByName('manager'); // Logging sebelum perubahan Log::info("Permission before changes: ", $roleManager->permissions->pluck('name')->toArray()); // Melakukan perubahan permission $permissionEditProfile = Permission::findByName('edit profile'); $roleManager->syncPermissions([$permissionEditProfile]); // Logging setelah perubahan Log::info("Permission after changes: ", $roleManager->permissions->pluck('name')->toArray()); } 4. Tidak Menggunakan Middleware Secara Konsisten Kesalahan berikutnya adalah tidak menggunakan middleware secara konsisten untuk mengontrol akses pada semua route yang diperlukan. Middleware adalah cara efektif untuk memastikan bahwa hanya pengguna dengan peran tertentu yang dapat mengakses route tertentu. Analogi: Seperti memiliki pintu masuk yang dilengkapi dengan penjaga keamanan, tetapi tidak ada penjaga di pintu-pintu lain. Siapapun bisa masuk melalui pintu tanpa penjaga. Contoh Koding: // Middleware untuk mengontrol akses berdasarkan role Route::group(['middleware' => ['role:admin']], function () { Route::get('/admin/dashboard', [AdminController::class, 'index']); Route::post('/admin/create-user', [UserController::class, 'store']); }); Route::group(['middleware' => ['role:editor']], function () { Route::get('/editor/dashboard', [EditorController::class, 'index']); Route::post('/editor/create-post', [PostController::class, 'store']); }); 5. Tidak Menguji Sistem RBAC Kesalahan terakhir adalah mengabaikan pengujian untuk memastikan sistem RBAC berfungsi dengan benar dan aman. Pengujian penting untuk mengidentifikasi potensi celah keamanan dan memastikan bahwa hak akses diberikan sesuai kebutuhan. Analogi: Seperti tidak menguji sistem alarm kebakaran di gedung. Ketika terjadi kebakaran, sistem mungkin tidak berfungsi dengan baik, menimbulkan risiko besar. Contoh Koding: use Tests\\\\TestCase; use App\\\\Models\\\\User; use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; class RBACFeatureTest extends TestCase { public function testAdminAccess() { $admin = User::factory()->create(); $admin->assignRole('admin'); $response = $this->actingAs($admin)->get('/admin/dashboard'); $response->assertStatus(200); } public function testEditorAccessDenied() { $editor = User::factory()->create(); $editor->assignRole('editor'); $response = $this->actingAs($editor)->get('/admin/dashboard'); $response->assertStatus(403); } } Keamanan yang Ditingkatkan Keamanan adalah salah satu alasan utama mengapa RBAC sangat penting. Dalam sistem RBAC, hanya pengguna dengan peran tertentu yang dapat mengakses atau mengubah informasi sensitif. Ini mirip dengan bagaimana sebuah bank menetapkan akses ke brankas hanya untuk manajer atau staf yang berwenang. Dengan cara ini, risiko kebocoran data atau penyalahgunaan informasi dapat diminimalkan, menjaga integritas dan kepercayaan terhadap sistem. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; // Membuat role dan permission $roleAdmin = Role::create(['name' => 'admin']); $roleUser = Role::create(['name' => 'user']); $permissionViewSensitiveData = Permission::create(['name' => 'view sensitive data']); $permissionEditSensitiveData = Permission::create(['name' => 'edit sensitive data']); // Memberikan permission ke role $roleAdmin->givePermissionTo(['view sensitive data', 'edit sensitive data']); $roleUser->givePermissionTo(['view sensitive data']); // Menetapkan role ke pengguna $user = User::find(1); $user->assignRole('admin'); Efisiensi Operasional yang Lebih Baik RBAC juga meningkatkan efisiensi operasional dengan mengelola hak akses berdasarkan peran. Daripada mengatur izin untuk setiap pengguna secara individual, kita cukup mengatur izin berdasarkan peran. Ketika ada perubahan dalam struktur organisasi atau tanggung jawab, kita hanya perlu memperbarui peran, bukan setiap pengguna. Analogi: Bayangkan sebuah gedung perkantoran dengan berbagai departemen. Setiap departemen memiliki akses ke area tertentu. Ketika seorang karyawan dipindahkan dari satu departemen ke departemen lain, cukup ubah akses mereka sesuai dengan departemen baru. Tidak perlu mengatur ulang akses satu per satu. Contoh Koding: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; use App\\\\Models\\\\User; // Membuat role baru $roleManager = Role::create(['name' => 'manager']); // Memberikan permission ke role baru $permissionApproveTransactions = Permission::create(['name' => 'approve transactions']); $roleManager->givePermissionTo(['approve transactions']); // Menetapkan role ke pengguna $user = User::find(2); $user->assignRole('manager'); Pengalaman Pengguna yang Lebih Baik Dengan RBAC, kita dapat memastikan bahwa setiap pengguna hanya melihat dan berinteraksi dengan konten yang relevan bagi mereka. Ini tidak hanya meningkatkan efisiensi tetapi juga memberikan pengalaman pengguna yang lebih personal dan terfokus. Pengguna merasa lebih dihargai dan aman, yang dapat meningkatkan kepuasan dan loyalitas mereka terhadap website. Analogi: Bayangkan sebuah toko besar dengan berbagai area khusus untuk pelanggan VIP, pelanggan reguler, dan staf. Setiap area memiliki akses yang sesuai dengan kebutuhan dan hak masing-masing. Pelanggan VIP mendapatkan layanan eksklusif, sementara pelanggan reguler mendapatkan layanan standar. Staf memiliki akses ke area yang diperlukan untuk pekerjaan mereka, tetapi tidak ke area VIP. Ini memastikan bahwa setiap orang mendapatkan pengalaman yang sesuai dengan peran mereka. Contoh Koding: // Middleware untuk mengontrol akses berdasarkan role Route::group(['middleware' => ['role:admin']], function () { Route::get('/admin/dashboard', [AdminController::class, 'index']); }); Route::group(['middleware' => ['role:manager']], function () { Route::get('/manager/dashboard', [ManagerController::class, 'index']); Route::post('/manager/create-product', [ProductController::class, 'store']); }); Route::group(['middleware' => ['role:user']], function () { Route::get('/user/dashboard', [UserController::class, 'index']); }); Pembaruan dan Pengujian yang Konsisten Untuk memastikan bahwa sistem RBAC berfungsi dengan baik, sangat penting untuk selalu memperbarui hak akses dan menguji sistem secara berkala. Pembaruan hak akses diperlukan untuk menyesuaikan dengan perubahan peran dan tanggung jawab dalam organisasi. Pengujian sistem membantu mengidentifikasi dan mengatasi potensi celah keamanan, memastikan bahwa hak akses diberikan sesuai kebutuhan dan tidak ada pengguna yang memiliki akses berlebihan atau tidak relevan. Analogi: Seperti sistem keamanan di sebuah gedung, pembaruan akses kunci dan pengujian sistem alarm secara berkala memastikan bahwa hanya orang yang berwenang yang memiliki akses, dan semua sistem berfungsi dengan baik untuk mencegah dan mengatasi potensi masalah keamanan. Contoh Koding: use Illuminate\\\\Support\\\\Facades\\\\Log; use Spatie\\\\Permission\\\\Models\\\\Role; use App\\\\Models\\\\User; public function updatePermissions() { // Misalkan ada perubahan dalam peran manajer $manager = Role::findByName('manager'); // Hapus semua permission lama $manager->syncPermissions([]); // Berikan permission baru sesuai dengan peran yang telah berubah $permissionCreateReport = Permission::findByName('create report'); $permissionViewDashboard = Permission::findByName('view dashboard'); $manager->givePermissionTo([$permissionCreateReport, $permissionViewDashboard]); // Update permissions untuk pengguna dengan role manager $users = User::role('manager')->get(); foreach ($users as $user) { $user->syncPermissions([$permissionCreateReport, $permissionViewDashboard]); } } Kesimpulan RBAC adalah metode yang sangat efektif untuk mengelola hak akses pengguna dalam sebuah website. Dengan menerapkan RBAC menggunakan Laravel 11 dan Spatie package, kita dapat meningkatkan keamanan, efisiensi, dan pengalaman pengguna. Penting untuk selalu memperbarui hak akses, menggunakan middleware secara konsisten, dan menguji sistem RBAC untuk menghindari kesalahan umum. Dengan begitu, sistem kita tidak hanya aman tetapi juga dapat diandalkan dan user-friendly. Belajar RBAC dan konsep web development lainnya dapat dilakukan dengan bimbingan mentor di buildwithangga.com. Dengan benefit akses seumur hidup, bonus konsultasi, grup diskusi, dan persiapan kerja yang matang, kamu bisa meningkatkan kemampuan dan siap bersaing di dunia kerja. Bergabunglah dengan komunitas belajar yang mendukung dan dapatkan kesempatan untuk berkembang bersama para ahli dan sesama pelajar yang bersemangat.

Pernahkah kamu merasa bingung saat pertama kali membuka aplikasi e-wallet? Desain yang kurang menarik dan informasi yang sulit dicari bisa membuat pengguna cepat bosan. Nah, untuk menghindari hal itu, kamu perlu tahu cara membuat homepage e-wallet yang menarik dan user-friendly. Pada artikel kali ini, kita akan mencoba untuk membuat tampilan UI homepage e-wallet yang menarik dan mudah digunakan! Yuk kita belajar bareng 🤩 1. Siapkan Frame Siapkan frame ukuran W:243 dan H:525 dan ganti warna frame dengan background Linear miring dari sudur kanan atas dan sudut kiri bawah dengan warna mengikuti gambar di atas. 2. Header Profile Siapkan shape lingkaran dengan ukuran 46px dan fill lingkaran tersebut dengan image foto,Teks “Arlene McCoy”: Poppins 20px, Semibold dan #202020Untuk foto profil, setelah kamu membuat lingkaran, masukan image foto profilmu ke dalam lingkaran dengan “Use as Mask” yang bisa kamu dapatkan image gratis dari unsplash yaa! Buat lingkaran sebagai layer mask, lalu letakkan di atas foto profil. Aktifkan "Use as Mask" untuk membuat foto profil menjadi bulat. Untuk icon notifikasi: Buatlah lingkaran dengan size 36px #FFFFF dan icon notifikasi 18px, warna #26262E dan lingkaran merah kecil sebagai penanda bahwa sedang ada notifikasi baru dengan kode warna #F74545 yaaGabungkakn ikon dan backgroundi dalam satu grup dengan select kedua elemen lalu Shift G untuk mengaktifkan grouping. Talking about the icons, you can get the free icons for this homepage from Iconsax 6,000 icons! You can get the plugin from Figma Community ;) Jarak antar foto profil ke teks adalah 7px dan jarak antar teks ke ikon adalah 17px 3. Mendesain Card “My Portfolio” Untuk card My Portfolio, buat kotak dengan menekan Shift R dengan kode warna #FFFFF. Lalu untuk isinya: “My Portfolio”: Poppins, 14px, Medium, #626271“USD”: Poppins, 14px, Semibold, #696971Icon Drop Down: Size 14px dengan warna #9D989CNominal Balance: Poppins, 32px, Semibold, dengan warna #6262Eteks “+3,74%”: 12px, Medium dan warna #AFAFAFBackground “+3,74%”: W:101 dan H:20. Tambahkan corner radius 20° serta beri warna #777EFFUntuk button “Top Up”: Insert icon dompet dengan stroke 2px dan warna #FFFFF dan tambahkan kata “Top Up” dengan size 12px, Medium #FFFFFGabungkan icon dompet dan “Top Up” ke dalam kotak ungu dengan jarak antar elemen 11px!Untuk background “Top Up”, insert Shift R dengan W: 101 dan H: 20. Pakai corner radius 20° dan warna #777EFF 4. Button “Deposit” dan “Withdraw” Pertama, buat kotak dengan W: 160.5 dan H: 52. Beri radius 50° dan warna #FFFFF untuk tiap background “Deposit:” serta “Withdraw”.Tambahkan icon Arrow arah bawah untuk “Deposit” dan arrow arah atas untuk “Withdraw”.Kedua icon tersebut berukuran 24px dengan stroke 2, dan warna #77EFFBuatlah background icon dengan shape lingkaran ukuran 44px dan warna #F0EDFEMasukan icon ke dalam background ikon masing-masing dengan posisi berada di center background.Untuk teks “Deposit” dan “Withdraw: Pilih font Poppins dengan ukuran 17px Medium dan kode warna #26262E yaGabungkan kata dan ikon dalam kotak yang sudah disiapkan di atas ke dalam kotak yang pertama dibuat. 5. Membuat Card “Bitcoin” dan “Ethereum” Press Shift R untuk membuat kotak Bitcoin dan Ethereum dengan size W: 219 dan H: 184 dengan radius 20° dan warna #FFFFF. Setelah membuat kotak untul card Bitcoin, masukan image Bitcoin dengan ukuran 44px dan buatlah image transparan Bitcoin dengan tracing menggunakan pen tool yang bisa kamu ambil bahan tracing-nya dari Google.Masukan teks “Bitcoin”, 13px, Medium dan warna #696971Insert background untuk teks “-0.79%” dengan size W: 65 dan H: 24, 15° dan warna #FD6637Untuk teks “-0.79%”, memiliki size 13px, Medium dan warna #FFFFFLalu untuk angka “$29,510.40”, buat di 24px, Semibold dan #26262E serta “BTC” di ukuran 13px, Medium dan #9D989C Tekan Shift R untuk membuat card “Ethereum”Masukan icon Ethereum di 44px dan warna #2E54D2Buatlah image transparan Ethereum dengan tracing menggunakan pen tool yang bisa kamu ambil bahan tracing-nya dari Google.Masukan teks “Ethereum” dengan ukuran 13px, Medium dan warna #696971Insert background untuk teks “+1.41%” dengan size W: 65 dan H: 24, 15° dan warna #58BC80Untuk “+1.41%”, memiliki size 13px, Medium dan warna #FFFFFUntuk “$29,510.40” dan “ETH” di kotak Ethereum, pengaturannya sama ya dengan angka milik Bitcoin :)Dapatkan icon tersebut dari plugin ini!Untuk mendapatkan icon “Bitcoin” dan “Ethereum” untuk kepentingan belajarmu, kami bisa dapatkan dari *plugin *IconScout di sini! 6. Design Kotak “The Graph” Insert rectangle berukuran W: 333 dan H: 80. Tambahkan corner radius 20° #FFFFF.Insert lingkaran 48px dan warna #6746EF untuk background iconTambahkan icon grid seperti contoh di atas dengan ukuran 24px yang dapat kamu dapatkan dari plugin Iconsax di sini.Lalu tambahkan nominal “$11,333.10” di 16px, Semibold dan warna teks #26262EMasukan semua elemen ke dalam card yang pertama dibuat tadi yaa 7. Bottom Navigation Bar Insert Shift R dan W: 219 dan H: 184 berwarna #FFFFF.Nah untuk isi Bottom Navigation Bar ini, kamu bisa masukan icon “wallet” ukuran 24px dan warna #7B7FE4 beserta label “Wallet” 10px Medium berwarna sama yang menandakan bahwa kamu sedang berada di page tersebut.Tambahkan juga icon kompas 24px dengan label “Discover” 10px, Medium dan warna #9D9B9CTambahkan beberapa icon lain seperti button untuk “Browse” dan “Settings” dan mengikuti warna “Discover” yang artinya kamu sedang tidak berasa di page tersebut.Jarak antar icon adalah 45px.Selalu masukan label untuk icon yaa! Agar pengguna ini button untuk apa :) Done! Jadi, membuat homepage e-wallet yang menarik itu penting banget, ya! Dengan desain yang baik, kamu nggak cuma bisa menarik pengguna baru, tapi juga membuat mereka setia menggunakan aplikasimu. Intinya, homepage yang keren adalah investasi jangka panjang untuk kesuksesan e-wallet-mu. Tertarik bikin homepage berkualitas lainnya? Pelajari kelas-kelas UI/UX gratis di BuildWithAngga lalu persiapkan skill untuk menjadi seorang UI/UX designer yang hebat! Aset icon kamu bisa dapatkan di sini ya!Dan untuk aset image kamu bisa dapatkan dari unsplash! Goodluck ;)

Halo semua. Di tutorial ini kita akan melanjutkan membuat ui design untuk aplikasi booking tiket film. Untuk page ini kita akan membuat film page, yang isinya mengenai informasi film, dan menentukan lokasi bioskop dan tanggal waktunya. Yuk kita mulai desain! 1. Memilih frame Frame yang digunakan pada desain ini yaitu sama seperti tutorial sebelumnya yaitu, menggunakan template iPhone 14 & 15 pro dengan ukuran 303x852 pixels. Untuk warna background pada frame menggunakan warna #F8F8F9 2. Membuat foto dan back button Pertama kita membuat poster film berikut langkahnya: Letakkan poster film Deadpool & Wolverine dengan size width: 393px, dan height: 479pxSelect poster dan tambah fill lalu ubah warna fill ke gradient, buatlah warna gradient atas dan bawah menjadi #F8F8F9, kemudian di tengah menggunakan warna #060E19 dengan tranparansi ke 0% Untuk membuat back button berikut langkahnya: Buatlah lingkaran menggunakan tools ellips (menekan huruf “O” pada keyboard). Beri ukuran 48 px.Masukkan ikon left arrow tipe outline dari Iconsax ukuran 24px.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. 3. Membuat movie title Untuk membuat movie title dan kategori chip akan dijadikan menggunakan fitur figma yaitu auto layout, Berikut langkahnya: Buat teks “Deadpool & Wolverine” = Poppins, bold, 20, warna #13181DUntuk kategori chip, ikutin 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: top left 4. Membuat desain container schedules Dalam page ini ada segmented control, yang merupakan adalah elemen navigasi horizontal yang memungkinkan pengguna beralih antara beberapa opsi atau tampilan dengan cepat. Di kasus ini ada opsi memilih schedule (pilih bioskop dan tanggal waktu) dan details (sinopsis dan pemeran). Pertama kita membuat di opsi schedule. Pertama membuat segmented control dahulu, berikut langkahnya: Buat teks “Schedule” = Poppins, 14, medium, warna #13181DBuat rectangle dengan size width: 172px, height: 2px lalu beri warna #F97316Select teks dan rectangle jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 4 pxAlign: top centerSelect object lalu duplikat (Ctrl+D pada keyboard) di sebelah kanan, lalu ganti teks menjadi “Details” = Poppins, 14, regular, warna #13181D dan untuk rectangle di-hide di layer panel di sebelah kiri.Select kedua object, jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 16pxAlign: top center Berikutnya kita membuat opsi pemilihan tanggal, berikut langkahnya: Buat teks “Today” = Poppins, 12, regular, warna #FFFFFFBuat teks “24 Jul” = Poppins, 12, semibold, warna #FFFFFF, dan letakkan di bawah teks “Today”Select kedua teks lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 16pxAlign: centerHorizontal padding: 4pxVertical padding: 4pxBeri warna fill #F97316Select object lalu duplikat (Ctrl+D pada keyboard) di sebelah kanan, dan ubah warna teks ke #F97316, kemudian warna fill diganti warna stroke #F97316 dengan ketebalan: 1.5px, lalu object tersebut duplikat (Ctrl+D pada keyboard) empat kali di sebelah kanan.Select semuanya lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 12pxAlign: left Berikutnya kita membuat location bar, berikut langkahnya: Masukkan ikon location tipe outline dari Iconsax ukuran 24px.Buat teks “Jakarta” = Poppins, Regular, 14, warna #B2B5BA kemudian letakan di samping kanan ikon searchSelect teks “Jakarta” 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 Berikunya kita akan membuat dua accordion theatre, yang satu accordion kebuka yang isinya nama tempat theatre, lalu dilengkapi dengan detail: jenis dan harga tiket, dan jam-jam yang ada. Dan yang kedua hanya menampilkan nama theatre. Pertama kita membuat accordion yang posisinya kebuka dengan nama tempat theatre. Berikut langkahnya: Buat teks “Kelapa Gading Tckt” = Poppins, 14, semibold, warna #13181DMasukan ikon arrow dari Iconsax ukuran 24px, dan letakkan di samping kanan teks “Kelapa Gading Tckt”Select keduanya lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: autoAlign: centerUbah size width: 333px, height: 24px Untuk bagian detail: jenis dan harga tiket, dan jam berikut langkahnya: Buat teks “Regular 2D” = Poppins, 12, regular, warna #13181DBuat teks “Rp 50,000” = Poppins, 12, regular, warna #13181D, letakkan di samping kanan teks “Regular 2D”Select kedua teks, lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: autoAlign: centerUbah size width: 333px, height: 20pxUntuk jam, buat teks “12:00” = Poppins, 12, medium, warna #13181DSelect teks “12:00”, lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: centerHorizontal padding: 4pxVertical padding: 4pxBeri warna stroke #F4CBAF dengan ketebalan: 1.5pxSelect object lalu duplikat (Ctrl+D pada keyboard) di sebelah kanan sebanyak empat kali, dan ganti teks dengan jam yang berbeda.Select semua jam lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 12 Select nama tempat theatre dan detail lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 16Align: top leftHorizontal padding: 14pxVertical padding: 16pxBeri warna fill #FFFFFF dan ubah corner radius: 20Untuk accordion yang hanya menampilkan nama theatre, hanya tinggal duplikat dari accordion sebelumnya lalu untuk bagian detail dihapus, dan bisa ganti ke lokasi lain.Select kedua accordion lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 16 Semua komponen diletakkan di posisi yang sudah dibuat di gambar atas, kemudian select semua komponen lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi: Gap between items: 16 5. Membuat desain container details Untuk berikutnya kita membuat opsi details yang isinya ada sinopsis dan pemeran. Pertama kita membuat sinopsis, berikut langkahnya: Buat teks “Synopsis” = Poppins, 12, bold, warna #13181DBuat teks paragraf dengan menggunakan Poppins, 12, regular, warna #7F8389 dan letakkan di bawah teks “Synopsis”. Untuk paragrafnya bisa copy paste dari sini berikut teksnya:Sosok Deadpool atau Wade Wilson (Ryan Reynolds) yang dikenal tidak bertanggung jawab dipercaya untuk mengubah sejarah Marvel Cinematic Universe (MCU) bersama Wolverine (Hugh Jackman). Mereka bekerja sama untuk mengalahkan musuh bersama.Select teks “Synopsis” dan teks paragraf lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 16Align: top left Kemudian pembuatan pemeran berikut langkahnya: Buat teks “Cast” = Poppins, 16, bold, warna #13181DLetakkan foto pemeran, sebagai contoh aku mengambil foto Ryan Reynolds, ukuran: 78px, ubah corner radius: 39px.Buat teks “Ryan Reynolds” = Poppins, 12, regular, warna #13181D, buatlah menjadi dua baris, ubah align: centerSelect foto dan teks “Ryan Reynolds” lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 8Align: centerSelect pemeran lalu duplikat (Ctrl+D pada keyboard) di sebelah kanan sebanyak tiga kali, dan ganti foto pemeran dan nama sesuai pada gambar di atas.Select semua pemeran lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 16Letakan pemeran di bawah teks “Cast”Select teks “Cast” dan pemeran lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 16 Lalu select synopsis dan cast lalu jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi: Gap between items: 16 6. Menyusun desain-desain komponen Setelah komponen-komponen sudah dibuat, waktunya menyusun komponen-komponen menjadi suatu page. Bisa diikuti dari gambar di atas. Results Nice! Dengan mengikuti step by step, akhirnya kamu berhasil membuat film page untuk booking tiket film. Awesome!!! Kesimpulan Pembuatan desain film page untuk aplikasi booking tiket film juga sangat penting untuk memberikan pengguna gambaran lengkap tentang film yang akan mereka tonton. Dengan menyediakan informasi yang komprehensif dan opsi yang relevan, film page tidak hanya mempermudah proses pemesanan tiket tetapi juga meningkatkan kepuasan dan keterlibatan pengguna. Ingin memperdalam pengetahuan kamu tentang UI/UX Design? Jangan lewatkan kesempatan untuk belajar dan meningkatkan keterampilan desain Anda dengan BuildWithAngga di kelas UI/UX Design. Temukan berbagai kelas terbaru yang dirancang khusus untuk membantu kamu menjadi ahli dalam UI/UX Design. Dari dasar-dasar hingga teknik lanjutan, pelajari semuanya dengan panduan dari instruktur berpengalaman. Bergabunglah sekarang dan jadilah bagian dari komunitas desainer yang kreatif dan inovatif! Kredit Asset poster film dan foto pemeran diambil dari IMDb https://www.imdb.com/title/tt6263850/mediaviewer/rm136803841/?ref_=tt_ov_i

Di artikel kali ini, kita akan mempelajari langkah-langkah membuat UI design laman hasil pencarian untuk website jual-beli mobil bekas. Kita akan membahas cara menciptakan merancang elemen-elemen kunci seperti search bar, filter pencarian, card mobil, infinitepagination, serta komponen pendukung lainnya yang memudahkan pengguna dalam menemukan mobil impian mereka. Ada beberapa alasan mengapa desain laman hasil pencarian yang baik itu sangat penting dalam platform jual-beli mobil bekas, seperti: Mempercepat proses penemuan mobil yang diinginkan penggunaMeningkatkan conversion rate dengan penyajian informasi yang relevanMenciptakan pengalaman pencarian yang menyenangkan dan intuitif Dan, kamu perlu tau dulu nih seperti apa sih tampilan dari laman pencarian yang akan kamu buat, dan kurang lebih seperti ini tampilannya: Tapi sebelumnya, kamu bisa baca dulu tutorial “Tutorial Bikin UI Design Landing Page Jual-Beli Mobil Bekas” yang bisa kamu baca di sini Mari kita mulai perjalanan desain kita untuk menciptakan laman hasil pencarian yang mudah digunakan oleh pengguna 🔍🚗" 1. Buka Software atau Website Figma Karena kita menggunakan figma untuk membuat tampilan laman pencarian, kamu bisa buka dulu software figma-nya, atau kamu juga bisa akses melalui website figma ya!!!, dan dalam tutorial ini saya menggunakan figma yang versi website. Kemudian jangan lupa login menggunakan akun kamu, dan jika tidak punya akun, kamu bisa membuatnya dulu ya. Setelah berhasil login, kamu bisa langsung memilih New Design File untuk membuat file desain baru, yang nantinya akan kamu gunakan untuk membuat desainnya, dan tampilannya seperti ini nih: Setelah klik New Design File, nantinya kamu akan di arahkan ke halaman canvas baru kamu, dengan tampilan seperti ini: Saya jelaskan sedikit mengenai bagian yang saya highlight yaaa, supaya nantinya kamu sudah tau bagian mana yang nantinya akan digunakan: Toolbar: berisi tools yang bisa kamu gunakan untuk menambahkan elemen desain, contohnya: shape, frame, pen-tool, text, plugin, komentar, hand-tool. dan di dalamnya juga tampilkan short cut, apabila kamu malas bolak balik buka toolbar-nya, dan berikut penjabarannya: Left Sidebar: berisi halaman, asset, dan identitas dari elemen, komponen, serta frame yang sudah kamu buat di dalam canvas, dan kamu bisa mengganti namanya sesuai yang kamu butuhkan, dan berikut penjabarannya: Right Sidebar: berisi editor yang berfungsi untuk merubah nilai dari elemen, serta frame yang sudah kamu buat di dalam canvas, serta ada bagian yang bernama Export yang bisa kamu gunakan untuk mendownload hasil desain kamu loh, dan berikut penjabarannya: Canvas: area yang bisa kamu gunakan untuk membuat desain, dan kamu bisa memanfaatkan toolbar untuk membuat elemen dan frame desain yang kamu inginkan, dan berikut penjabarannya: Nah, ketika kamu sudah mulai mendesain, maka contoh tampilan left sidebar, canvas, dan right sidebar akan berubah menjadi seperti ini nih: Setelah memahami bagian-bagian penting pada figma, selanjutnya, kamu sudah bisa untuk memulai membuat tampilan laman pencarian, pertama bisa dengan membuat bagian frame utama terlebih dulu di dalam canvas. 2. Bagian Frame Utama frame utama merupakan bagian yang sangat penting, karena berfungsi untuk menempatkan elemen, frame dan komponen yang akan kita buat nantinya, dan mari kita lanjut untuk membuat frame utama. 3. Cara Membuat Frame Utama Untuk membuat frame utama, kamu bisa menggunakan frame ukuran Macbook Air dan dapat ditambahkan dengan cara: Tekan tombol “F” pada keyboard, & jangan klik mouse kamu, tapi langsung kamu arahkan ke Right Sidebar, dan pilih opsi Macbook Air dan frame Macbook Air ini yang akan kamu jadikan sebagai frame utamaKemudian, select frame utama, lalu pada Right Sidebar ubah:Width: 1280pxHeight: 1130pxBackground Fill: #FFFFFF Kemudian, kamu bisa gunakan layout grid columns, berguna untuk memandu jarak di dalam frame, supaya nanti kamu bisa dengan mudah mengatur letak elemen, komponen, dan frame. dan kamu bisa menggunakan fitur ini dengan cara: Select frame utama, kemudian pada Right Sidebar pilih Layout GridLalu, klik icon “+”, kemudian ganti dari Grid menjadi ColumnsKemudian, ubah nilai di dalam Columns menjadi:Count: 12Margin: 64Gutter: 20Color Oppacity: 5% (apabila garisnya terlalu terang, bisa kamu turunkan lagi misalnya menjadi 3%) Setelah berhasil membuat frame utama, kamu sudah bisa memulai untuk membuat bagian-bagian dari laman pencarian nih, dan akan dimulai dari bagian Top Bar dulu yaa. 4. Bagian Top Bar Bagian Top Bar berada di posisi paling atas di frame utama, dan berfungsi sebagai alat navigasi pengguna di dalam website jual beli mobil bekas, yang berisi Logo, Menu Navigasi, Searchbar, Notifikasi, dan Profile, nah maka dari itu bagian ini sangat penting banget guysss. Tapi, sebelumnya kita perlu membuat Top Bar Area dulu nih, karena akan berfungsi sebagai wadah dari elemen, serta komponen Top Bar nanti, dan mari kita lanjut untuk membuat Top Bar Area. 5. Cara Membuat Top Bar Area Untuk membuat Top Bar Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan tombol “F” pada keyboard, dan tempatkan ke dalam frame utama, dan tambahkan warna Background Fill= #FFFFFF.Ubah width dari frame tersebut menjadi 1280px, sama seperti frame utama.Ubah height dari frame tersebut menjadi 125pxStroke: ketebalan 1, inside, down, dan Fill: #F0F0F0Jangan lupa masukan kedalam frame utama Setelah berhasil membuat Top Bar Area, maka bisa kamu lanjutkan untuk membuat elemen, dan komponen di dalam area tersebut, dan mari kita lanjut ke cara pembuatannya. 6. Cara Membuat Elemen, dan Komponen di Dalam Top Bar Area Di dalam Top Bar Area, terdapat beberapa elemen penting yang perlu ditambahkan, antara lain Logo, Menu Navigasi, Icon Notifikasi dengan Badge, dan Profile, berikut cara pembuatannya. Cara Membuat Logo: Untuk logo Landing Page, kamu bisa membuat komponen ini dengan cara:Ketik huruf “S”: Inter, Black, dan 36px.Klik kanan pada text tersebut, kemudian pilih frame selection.Ubah width, dan height dari frame tersebut menjadi 44px.Tambahkan fill background pada frame tersebut, dan ubah menjadi linear, dengan:stops 0% #588CF3, Oppacity: 100%stops 100% #115BEE, Oppacity: 100%Ubah border radius frame tersebut menjadi 12px. Lalu, letakan logo di dalam top bar area dengan jarak kiri top bar area 62px dan atasnya 40px. Cara Membuat Menu Navigasi: Untuk Menu Navigasi, kamu bisa membuat komponen ini dengan cara:Tambahkan 3 text sesuai gambar, dengan style: Inter, Reguler, 16px, dan Text Fill: #2F3137Tambahkan icon down linear, ubah warna menjadi #97989B, lalu select icon tersebut dan CTRL + D untuk copy paste sehingga kamu memiliki 2 icon downUntuk icon bisa kalian dapatkan di sini yaaa !.Select kedua icon tersebut, kemudian tekan tombol “k” pada keyboard, dan ubah height keduanya dari 24px, menjadi 15pxSetelah itu tempatkan icon down pertama di sebelah text Jual Mobil, dan tempatkan icon down kedua di sebelah text Beli MobilSupaya lebih rapih, gunakan auto layout untuk bagian Jual Mobil, dan Beli Mobil, atur jarak text dan icon sebesar 8pxKemudian masukan ke dalam frame top bar area Lalu, letakan Menu Navigasi di dalam top bar area dengan jarak kiri dengan logo sebesar 133px Cara Membuat Notifikasi dengan Badge: Untuk Notifikasi dengan Badge bisa kamu membuat komponen ini dengan cara:Tambahkan icon notification bold, ubah warnanya menjadi #2F3137Lalu, select icon tersebut kemudian tekan tombol “k” pada keyboard, ubah ukurannya dari 24px menjadi 32pxUntuk badge, kita tambahkan text “10+” lalu pada Right Sidebar ubah style text: Inter, Reguler, dan 12pxKemudian, select text tersebut, dan Shift + A pada keyboard untuk mengaktifkan auto layout, dan buat nilainya menjadi:Horizontal Padding: 8pxVertical Padding: 4pxTambahkan warnanya menjadi Background Fill: #EF5948Ganti warna text menjadi #FFFFFFKemudian susun seperti gambar, dan masukan ke dalam frame top bar area Lalu, letakan notifikasi dengan badge di dalam top bar area denganjarak kanan top bar area 261px dan atasnya 40px Cara Membuat Tampilan Profile: Untuk Profile, kamu bisa membuat komponen ini dengan cara:Tambahkan 2 text, pertama untuk nama kamu, dengan style: Inter, Medium, 14px, dan Fill: #2F3137 kedua untuk kata “Penjual”, dengan style: Inter, Reguler, 14px, dan Fill: #7D7E82.Untuk membuatnya lebih rapih, pertama susun keduanya secara vertikal, nama kamu di atas, dan text penjual di bawah, lalu select keduanya, dan Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Vertical Gap: 0pxHorizontal Padding, dan Vertical Padding: 0pxUntuk foto profile, pertama tekan tombol “O” pada keyboard, lalu klik kiri pada mouse, kemudian ubah ukuran width, dan height menjadi 56px.Lalu, tambahkan stroke dengan ketebalan 1, outside, dan #E5E5E5Kemudian, isi dengan foto yang kalian suka, atau kalian bisa mencari foto lain di Unsplash yaa !!!Kemudian susun seperti gambar, dan masukan ke dalam frame top bar area lalu, letakan profile di dalam top bar area dengan jarak kanan top bar area 56px dan atasnya 34px Kemudian, jika semua elemen sudah di susun di dalam top bar area maka, hasilnya akan seperti gambar ini: Setelah berhasil membuat Top Bar Area serta elemen, dan komponen di dalamnya, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Left Sidebar 7. Bagian Left Sidebar Bagian left sidebar berada di posisi sebelah kiri, di bawah top bar, di dalam frame utama, dan berfungsi untuk memfilter informasi mobil yang ingin di cari oleh pengguna, di dalamnya berisi komponen filter seperti pencarian, range harga, kondisi, hingga transmisi. Dan untuk membuat bagian left sidebar, kita perlu membuat bagian areanya dulu, sebagai wadah untuk elemen, dan komponennya nanti. 8. Cara Membuat Left Sidebar Area Untuk membuat Left Sidebar Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan tombol “F” pada keyboard, dan tempatkan ke dalam frame utama, dan tambahkan warna Background Fill= #FFFFFF.Ubah width dari frame tersebut menjadi 239px, sama seperti frame utama.Ubah height dari frame tersebut menjadi 1204pxStroke: ketebalan 1, inside, right, dan Fill: #F0F0F0Tambahkan layout grid columns: count 2, dan margin 16Lalu, letakan left sidebar ke dalam frame utama di sebelah kiri dengan jarak sisi kiri 0px dan jarak dengan top bar juga 0px Setelah berhasil membuat Left Sidebar Area, mari kita lanjut untuk membuat elemen, dan komponen di dalamnya, seperti pencarian, range harga, kondisi, hingga transmisi. 9. Cara Membuat Elemen, dan Komponen di Dalam Left Sidebar Di dalam Left Sidebar Area, terdapat beberapa elemen penting yang perlu ditambahkan antara lain pencarian, range harga, kondisi, hingga transmisi, dan berikut cara pembuatannya. Cara Pembuatan Filter dengan tombol reset: Untuk Filter, kamu bisa membuat komponen ini dengan cara:Tambahkan text “filter” lalu pada Right Sidebar ubah style text: Inter, Reguler, Uppercase, Letter Spacing: -2%, 16px, dan Text Fill: #97989BLalu, tambahkan icon rotate left linear, kemudian select icon tersebut, dan CTRL + ALT + G, lalu tambahkan auto layout dengan Shift + A, lalu pada Right Sidebar ubah:Border Radius: 100Horizontal Padding: 8pxVertical Padding: 8pxBackground Fill: #3775F1Icon Fill: #FFFFFFLalu ubah ukuran auto layout, pertama select auto layout tersebut, dan tekan tombol “k” pada keyboard, kemudian ubah ukurannya dari 40px menjadi 24pxLalu, select text Filter, dan juga icon rotate yang sudah kita buat, kemudian Shift + A, untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Width: 239pxHeight: 69pxHorizontal Resizing: fixedVertical Resizing: fixedHorizontal gap: AutoHorizontal Padding: 16pxVertical Padding: 24pxStroke: ketebalan 1, down, inside, dan fill: #f0f0f0f0 Kemudian letakan filter di dalam left sidebar dengan jarak atas, kiri, dan kanan sisinya 0px Cara membuat pencarian atau search bar: Untuk Search Bar, kamu bisa membuatnya dengan cara:Tambahkan text “BMW Car|” lalu pada Right Sidebar ubah style text: Inter, Medium, 12px, dan Text Fill: #2F3137Lalu, tambahkan icon search linear, kemudian select icon tersebut, dan CTRL + ALT + G, lalu tambahkan auto layout dengan Shift + A, lalu pada Right Sidebar ubah:Border Radius: 100Horizontal Padding: 8pxVertical Padding: 8pxBackground Fill: #3775F1Icon Fill: #FFFFFFDrop Shadow: y 4, blur 15, spread -3, dan fill #000000 25%Lalu ubah ukuran auto layout, pertama select auto layout tersebut, dan tekan tombol “k” pada keyboard, kemudian ubah ukurannya dari 40px menjadi 24pxLalu, select text “BMW Car|”, dan juga icon search yang sudah kita buat, kemudian Shift + A, untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Width: 207Border Radius: 100Horizontal Padding: 12,8pxVertical Padding: 8pxHorizontal gap: AutoBackground Fill: #3775F1, dan Oppacity: 5%Stroke: ketebalan 1, inside, dan Fill: #3775F1 Kemudian, letakan searchbar di bawah filter dengan jarak 24px Cara Membuat Range Harga: Untuk membuat Range Harga, kamu bisa membuatnya dengan cara:Pertama kamu bisa membuat judulnya dulu, dengan text “Range Harga” dengan style: Inter, Semibold, 16px, dan Text Fill: #2F3137Lalu buat 2 text, pertama untuk label “Max”, dengan style: Inter, Medium, 12px dan Text Fill: #97989B, kedua untuk text “2M”, dengan style: Inter, Reguler, 16px, dan Text Fill: #115BEE.Untuk membuatnya lebih rapih, pertama susun keduanya secara vertikal, label “Max” di atas, dan text “2M” di bawah, lalu select keduanya, dan Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Vertical Gap: 0pxHorizontal Padding, dan Vertical Padding: 0pxKemudian, tambahkan line di bawah text tersebut dengan menekan tombol “L” pada keyboard, kemudian ubah Width: 207px Lalu, letakan range harga di bawah searchbar dengan jarak 16px Cara membuat Graph bagian dari Range Harga: Untuk membuat graph, kamu bisa membuatnya dengan cara:Buat 1 buat rectangle, Width: 12px, Height: 16px, Border Radius Kiri Atas: 2px dengan Background Fill: #F1F2F3. (perhatikan gambar karena ada yang border radius atas keduanya 2px)Kemudian select rectangle tersebut, lalu CTRL + D hingga berjumlah 5, kemudian sesuaikan height seperti pada gambar, berikut susunan urut warnanya:#ECEDEF#E3E5E8#DBDEE1#D3D6DA#CACFD3Lalu, untuk membuat yang berwarna biru, pertama select salah satu rectangle, lalu CTRL + D hingga berjumlah 6, kemudian sesuaikan height seperti pada gambar, berikut susunan urut warnanya:#115BEE#286BF0#407BF2#588CF3#709CF5#88ADF7Terakhir, untuk membuat deret yang terakhir, pertama select salah satu rectangle, lalu CTRL + D hingga berjumlah 4, kemudian sesuaikan height seperti pada gambar, berikut susunan urut warnanya:#DBDEE1#E3E5E8#ECEDEF#F1F2F3Kemudian susun semua rectangle seperti pada gambar.Lalu, masukan ke dalam frame Left Sidebar Area lalu, letakan graph di bawah range harga dengan jarak 0px Cara Membuat Input Minimal dan Maksimal bagian dari Range Harga: Untuk membuat input minimal dan maksimal, kamu bisa membuatnya dengan cara:Tambahkan text “Min” lalu pada Right Sidebar ubah style text: Inter, Reguler, 12px, dan Text Fill: #97989BTambahkan text “900jt” lalu pada Right Sidebar ubah style text: Inter, Semibold, 12px, dan Text Fill: #3775F1Kemudian select text “900jt”, lalu Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Width: 93Horizontal resizing: fixedHorizontal padding: 8pxVertical padding: 8pxBackground Fill: #3775F1, Oppacity: 5%Stroke: ketebalan 1, inside, dan Fill: #3775F1Kemudian untuk membuat maximal, kalian cukup select semua elemen input minimal, lalu CTRL + D, kemudian ganti kata “Min” menjadi “Max”, dan text “900jt” menjadi “2M” Lalu letakan input tersebut di bawah graph dengan jarak 16px Cara Membuat Drop Down Menu: Untuk membuat drop down menu seperti transmisi, kondisi mobil, dst, kamu bisa membuatnya dengan cara:Tambahkan text “Transmisi” lalu pada Right Sidebar ubah style text: Inter, Semibold, 16px, dan Text Fill: #2F3137Lalu, tambahkan icon arrow up linear, kemudian select icon tersebut, dan CTRL + ALT + G, lalu tambahkan auto layout dengan Shift + A, lalu pada Right Sidebar ubah:Border Radius: 100Horizontal Padding: 8pxVertical Padding: 8pxBackground Fill: #3775F1, Oppacity: 5%Icon Fill: #3775F1Lalu ubah ukuran auto layout, pertama select auto layout tersebut, dan tekan tombol “k” pada keyboard, kemudian ubah ukurannya dari 40px menjadi 24pxKemudian, select text “Transmisi”, dan icon arrow up yang sudah kamu buat tadi, lalu Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Vertical padding: 8pxWidth: 207px (sesuai dengan margin Left Sidebar Area yang sebesar 16px)Kemudian, buat rectangle dengan style:Border Radius: 2pxSize: 12pxStroke: ketebalan 1, inside, dan Fill: #97989BHapus Background FillTambahkan text “Automatic” di sebelah kanan rectangle, lalu pada Right Sidebar ubah style text: Inter, Reguler, 16px, dan Text Fill: #636569Kemudian, CTRL + D, text “Automatic” dan rectangle, dan ganti text menjadi “Manual”, dan tempatkan di bawahnya. Lalu select semua elemen tersebut, dan Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Pastikan Width: 207pxVertical gap: 16pxVertical padding: 16, 0pxStroke: ketebalan 1, inside, Top, dan Fill: #F0F0F0Nah, kita sudah berhasil membuat satu drop down menu nih, yang nantinya elemen tersebut kamu bisa manfaatkan untuk membuat menu yang lain.Untuk membuat drop down menu kondisi mobil, maka kamu hanya perlu CTRL + D saja dari Transmisi dan isinya bisa kamu ganti sesuai pada gambar. Kemudian, letakan dropdown tersebut di bawah input dengan jarak 24px Cara Membuat Drop Down Menu Closed: Untuk drop down menu closed, kamu bisa membuatnya dengan cara:Copy bagian judul dan icon arrow up yang sebelumnya sudah kamu buatGanti text judul sesuai pada gambarUntuk icon arrow up bisa kamu replace dengan icon arrow down dengan ukuran yang samaKemudian, hapus background auto layout, kemudian ganti warna icon menjadi #97989BSelanjutnya, bisa kamu terapkan untuk menu berikutnya. Cara Membuat Pencarian Lokasi Penjual: Untuk menu lokasi penjual, kamu bisa membuatnya dengan cara:Copy bagian elemen judul dan icon arrow up yang sebelumnya sudah kamu buat, bisa dari Transmisi atau Kondisi MobilLalu, ubah isi judulnya menjadi “Lokasi Penjual”Buat rectangle dengan Width: 207px dan Height: 107pxTambahkan stroke pada rectangle tersebut, dengan style: ketebalan 1, inside, Fill: #F0F0F0Kemudian, ganti background rectangle tersebut dari warna menjadi gambar, dan kamu bisa mencari gambar map di UnsplashLalu, tambahkan icon maximize-4 linear kemudian select icon tersebut, dan CTRL + ALT + G, lalu tambahkan auto layout dengan Shift + A, lalu pada Right Sidebar ubah:Border Radius: 100Horizontal Padding: 8pxVertical Padding: 8pxBackground Fill: #FFFFFFIcon Fill: #2F3137Lalu ubah ukuran auto layout, pertama select auto layout tersebut, dan tekan tombol “k” pada keyboard, kemudian ubah ukurannya dari 40px menjadi 24pxKemudian tempatkan di atas kanan rectangle map yang sudah kita buat, kemudian select keduanya, kemudian CTRL + ALT + G. Cara Membuat Input bagian dari Lokasi Penjual: Untuk input di bawah map, kamu bisa membuatnya dengan cara:Tambahkan text “Masukan Alamat” lalu pada Right Sidebar ubah style text: Inter, Reguler, 12px, dan Text Fill: #97989BTambahkan icon arrow down, dan ubah ukuran width dan height menjadi 12px, dan ubah warna icon menjadi #97989BSelect kedua elemen tersebut, kemudian Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Horizontal gap: AutoHorizontal padding: 12,8pxVertical padding: 8pxKemudian, tempatkan auto layout di bawah map, dengan jarak 12px Selanjutnya, kamu bisa aktifkan auto layout untuk semua elemen lokasi penjual, dimulai dari judul hingga input, cukup select ketiga komponen, lalu Shift + A, pastikan auto layout memiliki nilai: Vertical gap: 12pxVertical padding: 24,0pxStroke: ketebalan 1, inside, top, dan Fill: #F0F0F0 Lalu letakan di bawah dropdown dengan jarak 24px Setelah semua elemen dibuat, maka kamu bisa menyusunnya sesuai pada gambar Setelah berhasil membuat Left Sidebar Area, serta elemen, dan komponen di dalamnya, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Breadcrumb. 10. Bagian Breadcrumb Bagian Breadcrumb berada di posisi tengah, di bawah top bar, di kanan left sidebar, dan di dalam frame utama, yang berfungsi untuk penampil informasi letak halaman yang sedang di kunjungi pengguna beserta tampilan hasil atau search results mobil yang telah di cari oleh pengguna. Dan untuk membuat bagian Breadcrumb, kita perlu membuat bagian areanya dulu, sebagai wadah untuk elemen, dan komponennya nanti. 11. Cara Membuat Breadcrumb Area Untuk Breadcrumb Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan tombol “F” pada keyboard, dan tempatkan ke dalam frame utama, dan tambahkan warna Background Fill= #FFFFFF.Ubah width dari frame tersebut menjadi 802px, sama seperti frame utama.Ubah height dari frame tersebut menjadi 69pxStroke: ketebalan 1, Inside, down, dan Fill: #F0F0F0Lalu, letakan Breadcrum Area ke dalam frame utama di posisi di tengah, dengan jarak dari left sidebar 0px dan jarak dengan top bar juga 0px Setelah berhasil membuat Breadcrumb Area, mari kita lanjut untuk membuat elemen, dan komponen di dalamnya. 12. Cara Membuat Elemen di dalam Breadcrumb Area Di dalam Breadcrumb Area, terdapat 2 elemen penting yang perlu ditambahkan, yaitu Breadcrumb, dan Search Results, berikut cara pembuatannya Cara Membuat Breadcrumb, dan Search Results: Untuk Breadcrumb, kamu bisa membuatnya dengan cara:Tambahkan text “Home” lalu pada Right Sidebar ubah style text: Inter, Reguler, 14px, dan Text Fill: #97989BSelect text tersebut, dan CTRL + D hingga muncul 4 text lagi, kemudian ganti dengan text sesuai pada gambar.Kemudian, select semua text lalu Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Horizontal gap: 18pxLalu, tempatkan ke dalam frame dan letakan di bagian kiri dengan jarak sebesar 24pxUntuk Results, kamu bisa membuatnya dengan cara:Tambahkan text “300 Results” lalu pada Right Sidebar ubah style text: Inter, Bold, 16px, Letter Spacing: -2% dan Text Fill: #97989BLalu, tempatkan ke dalam frame dan letakan di bagian kanan dengan jarak sebesar 24px Setelah berhasil membuat Breadcrumb Area, serta elemen di dalamnya, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Card Content. 13. Bagian Card Content Bagian Card Content berada di posisi tengah, di bawah breadcrumb, di samping kanan left sidebar, di dalam frame utama, merupakan bagian paling penting, karena berfungsi untuk menampilkan hasil pencarian informasi mobil kepada pengguna. Dan untuk membuat bagian Card Content, kita perlu membuat bagian areanya dulu, sebagai wadah untuk elemen, dan komponennya nanti. Perlu di ingat juga nih, kalau komponennya identik (seperti pada gambar), kamu cukup bikin satu saja, lalu copy paste kemudian ubah isi elemennya saja, jadi kamu tidak perlu buat satu-satu ya guys. 14. Cara Membuat Card Content Area Untuk Card Content Area, kamu bisa membuatnya dengan cara: Tekan tombol “F” pada keyboard, dan tempatkan ke dalam frame utama, dan tambahkan warna Background Fill= #FFFFFF.Ubah width dari frame tersebut menjadi 762px, sama seperti frame utama.Ubah height dari frame tersebut menjadi 231pxBorder Radius: 20pxClip Content: ActiveStroke: ketebalan 1, Inside, dan Fill: #F0F0F0Jangan lupa masukan kedalam frame utama 15. Cara Membuat Elemen, dan Komponen di Dalam Card Content Di dalam Card Content Area terdapat beberapa elemen yang perlu ditambahkan seperti Gambar Mobil, Nama Mobil, Label, Harga, hingga wishlist, dan berikut cara pembuatannya. Cara Pembuatan Gambar Mobil: pertama siapkan foto mobil terlebih dulu, dan dalam latihan desain ini, kalian bisa cari, dan pakai foto mobil dari situs Unsplash yaa.Kemudian, manfaatkan tools Remove.bg untuk menghilangkan background yaaa, dan tenang saja gratis kok, kemudian gunakan tools tersebut untuk foto mobil-mobil lainnya ya.Lalu, cara menggunakan remove bg itu mudah banget kok, kalian cukup kunjungi situsnya, kemudian pilih upload image, kemudian tinggal tunggu proses penghilangan background-nya kemudian download deh. Lalu kembali di figma, Buat rectangle dengan Width: 270px dan Height: 179pxTempatkan rectangle di bagian kiri di dalam Card Content Area, dengan jarak 16px, dan Alignment: MiddleKemudian, select rectangle tersebut, lalu pada right sidebar ganti Fill menjadi foto atau image, gambar mobil yang sudah kamu edit menggunakan tools remove(.)bg sebelumnya, kemudian tempatkan ke dalam Content Card Area. Cara Membuat Nama, dan Harga Mobil: Untuk Nama , dan Harga Mobil, kamu bisa membuatnya dengan cara:Tambahkan text nama mobil yang kamu mau, lalu pada Right Sidebar ubah style text: Inter, Medium, 18px, Line-Height: 31, dan Text-Fill: #2F3137Tambahkan text harga yang kamu mau, lalu pada Right Sidebar ubah style text: Inter, Medium, 24px, Line-Height: 31, Text-Fill: #2F3137, dan untuk text “RP”, ubah Oppactity: 40%.Kemudian, pastikan jarak dengan gambar sebesar 20px Cara Membuat Wishlist: Untuk Whistlist, kamu bisa membuatnya dengan cara:tambahkan icon heart linear kemudian select icon tersebut, dan CTRL + ALT + G, lalu tambahkan auto layout dengan Shift + A, lalu pada Right Sidebar ubah:Border Radius: 100Horizontal Padding: 8pxVertical Padding: 8pxBackground Fill: #F7F7F8Icon Fill: #2F3137Lalu ubah ukuran auto layout, pertama select auto layout tersebut, dan tekan tombol “k” pada keyboard, kemudian ubah ukurannya dari 40px menjadi 32px. Cara Membuat Label Negotiable: Untuk Label Negotiable, bisa kamu buat dengan cara:Tambahkan text “Negotiable” pada right sidebar ubah style: inter, reguler, 10px, dan fill #3775F1, lalu Shift + A untuk aktifkan auto layout, lalu pada Right Sidebar ubah:Horizontal Padding: 8pxVertical Padding: 6pxBackground Fill: #3775F1, Oppacity: 5%Stroke: ketebalan 1, inside, dan Fill: #3775F1 Cara Membuat Label: Untuk Label kita hanya memperlukan 1 saja yang nantinya bisa digunakan terus-menerus, dan kamu bisa membuatnya dengan cara:Tambahkan icon speedometer linear, kemudian ubah ukurannya menjadi 16px, Icon Fill: #949698Tambahkan text kilometernya, lalu pada Right Sidebar ubah style text: Inter, Reguler, dan 12px.Select keduanya kemudian Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Border Radius: 100Horizontal gap: 4Horizontal padding: 8pxVertical padding: 6pxBackground Fill: #F9FAFAStroke: ketebalan 1, inside, dan #2F3137 oppacity 8%Kemudian tambahkan line di atasnya dengan style: ketebalan 1, inside, Fill: #E6E6E6, dan DashSelanjutnya bisa kamu sesuaikan dengan gambar, dan untuk dealer, kamu bisa menggantinya dengan lingkaran ukuran 16px, dan gantikan dengan gambar. Selanjutnya kamu bisa copy paste dan mengganti isi konten seperti contoh pada gambar Lalu, untuk Card Content sudah selesai, namun kamu perlu membuat juga yang selected, dan kamu bisa membuatnya dengan cara: Pilih yang mau dijadikan selectedStroke: ketebalan 2, Fill: #3775F1, dan insideDropshadow: y 8, blur 50, spread -10, dan #0E1015 14% Setelah berhasil membuat Content Card Area, serta elemen, dan komponen di dalamnya, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Right Sidebar. 16. Bagian Right Sidebar Bagian right sidebar berada di posisi sebelah kanan, di bawah top bar, di dalam frame utama, dan berfungsi untuk menampilkan deskripsi singkat atau quick preview dari card yang di pilih oleh pengguna, dan di dalamnya berisi komponen seperti informasi mobil, dan tombol kontak Dan untuk membuat bagian right sidebar, kita perlu membuat bagian areanya dulu, sebagai wadah untuk elemen, dan komponennya nanti. 17. Cara Membuat Right Sidebar Area Untuk membuat Right Sidebar Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan tombol “F” pada keyboard, dan tempatkan ke dalam frame utama, dan tambahkan warna Background Fill= #FFFFFF.Ubah width dari frame tersebut menjadi 239px, sama seperti frame utama.Ubah height dari frame tersebut menjadi 1204pxStroke: ketebalan 1, inside, left, dan Fill: #F0F0F0Tambahkan layout grid columns: count 2, dan margin 24Lalu, letakan right sidebar ke dalam frame utama di sebelah kanan dengan jarak sisi kanan 0px dan jarak dengan top bar juga 0px Setelah berhasil membuat Right Sidebar Area, mari kita lanjut untuk membuat elemen, dan komponen di dalamnya, seperti informasi mobil, dan tombol kontak. 18. Cara Membuat Elemen, dan Komponen di dalam Right Sidebar Area Di dalam Right Sidebar Area, terdapat beberapa elemen penting yang perlu ditambahkan antara lain informasi mobil, serta tombol kontak, dan berikut cara pembuatannya. Cara Membuat Quick Preview: Untuk Quick Preview, kamu bisa membuatnya ini dengan cara:Tambahkan text “Quick Preview” lalu pada Right Sidebar ubah style text: Inter, Reguler, Uppercase, Letter Spacing: -2%, 16px, dan Text Fill: #2F3137Lalu, select text Quick Preview yang sudah kita buat, kemudian Shift + A, untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Width: 239pxHeight: 69pxHorizontal Resizing: fixedVertical Resizing: hugHorizontal gap: AutoHorizontal Padding: 24pxVertical Padding: 24pxStroke: ketebalan 1, down, inside, dan fill: #f0f0f0f0 Lalu letakan quick preview ke dalam right sidebar di posisi paling atas Cara Membuat Gambar Mobil: Untuk View Image, kamu bisa membuatnya dengan cara:buat rectangle dengan ukuran Width: 191px dan Height: 107px, dan ganti warnanya dengan gambar mobil yang kamu mau.Lalu, tambahkan icon left arrow linear kemudian select icon tersebut, dan CTRL + ALT + G, lalu tambahkan auto layout dengan Shift + A, lalu pada Right Sidebar ubah:Border Radius: 100Horizontal Padding: 8pxVertical Padding: 8pxBackground Fill: #E5E5E5, Oppcity: 50pxIcon Fill: #2F3137Background Blur: 12pxLalu ubah ukuran auto layout, pertama select auto layout tersebut, dan tekan tombol “k” pada keyboard, kemudian ubah ukurannya dari 40px menjadi 22px.Kemudian CTRL + D auto layout tersebut kemudian Shift + H untuk flip horizontal dan tempatkan sesuai gambar. Lalu letakan di bawah quick preview dengan jarak 20px Cara Membuat Deskripsi: Untuk Deskripsi, kamu bisa membuatnya dengan cara:Tambahkan line dengan style: ketebalan 1, inside, Fill: #E6E6E6, dan Dashcopy negotiable dari elemen yang ada pada Card ContentTambahkan label seperti yang ada di Card ContentTambahkan deskripsi dengan style: Inter, Reguler, Line-Height: 22px, 12px, text fill: #636469Tambahkan judul mobil dengan style: Inter, Medium, Line-Height: 31px, 18px, text fill: #2F3137Tambahkan harga mobil dengan style: Inter, Semibold, 22px, text fill: #2F3137 lalu, letakan di bawah gambar mobil dengan jarak 12px Cara Membuat Tombol Kontak (Whatsapp), dan More: Untuk Tombol More dan Whatsapp, kamu bisa membuatnya dengan cara:Tambahkan text “More” lalu pada Right Sidebar ubah style text: Intel, Reguler, Line-Height: 22px, 14px, text fill: #636469select text tersebut, kemudian Shift + A untuk mengaktifkan auto layout, lalu pada Right Sidebar ubah:Border radius: 100Horizontal padding: 32pxVertical padding: 12pxBackground Fill: #F7F7F8Untuk “Whatsapp”, cukup copy paste tombol more, kemudian ganti isi text dengan whatsapp dan warnanya menjadi putih, kemudian ganti background dengan #0DB572 lalu, letakan di bawah deskripsi dengan jarak 32px Setelah menyelesaikan bagian right sidebar, langkah selanjutnya itu adalah kita perlu memastikan nih kalau susunan tiap bagian sudah benar, maka dari itu kita perlu mengeceknya dari awal. 19. Menyusun Bagian Laman Pencarian Pada bagian atas terdapat top bar, bagian kiri terdapat left sidebar, bagian tengah terdapat breadcrumb, serta content card, dan bagian kanan, terdapat right sidebar Pastikan sususnannya sudah benar ya guys 😀 20. Results: Akhirnya, kamu telah selesai membuat desain “Laman Pencarian Website Jual-Beli Mobil Bekas” dan selanjutnya adalah kamu sudah bisa membuat presentasi desain dengan mockup 🤩, dan untuk membuatnya kita tidak perlu pakai plugin, cukup pakai website shots saja 😁. Membuat Presentasi Desain dengan Mockup Untuk membuat presentasi desain menggunakan mockup, kamu bisa gunakan website shots.so ini yaa! Karena saat kamu ingin mempresentasikan desainmu, client harus bisa melihat gambaran desain yang sudah jadi itu seperti apa, dan berikut caranya: Cara Membuat Presentasi Desain dengan Mockup 1. Export Frame Utama, kemudian Buka website shots(.)so Pertama, kamu bisa export dulu frame utama yang sudah selesai kamu desain, lalu pada Right Sidebar ubah: Scale: 4x (bisa di ubah menjadi 1x-3x, tergantung kebutuhan kamu)Type: PNG (bisa di ubah ke JPG, saran saya pakai PNG saja) Kemudian, bisa kamu lanjutkan dengan membuka laman shots.so 2. Memilih Mockup yang akan di Gunakan Kemudian pada left sidebar, kamu bisa mengklik opsi Screenshot, pilih Laptop, pilih Macbook Air M2. 3. Setelah Mockup dipilih, lalu Upload Gambar yang Sudah di Export Lalu, klik pada area kotak merah untuk mengupload gambar yang sudah kamu export sebelumnya. 4. Merubah Background Gradient menjadi Tansparent, kemudian Download Pada left sidebar, kamu bisa mengklik frame, kemudian ubah background menjadi transparent, kemudian klik download. 5. Hasil setelah Mockup berhasil di Download Setelah berhasil di download kamu sudah bisa bagikan, dan presentasikan kepada client-client kamu deh 🤩🤩😁. Kesimpulan dari Pembuatan Laman Pencarian Jual-Beli Mobil Bekas dengan Figma Sebelumnya saya ucapkan selamat, karena pada tutorial pembelajaran ini kamu telah berhasil membuat desain “Laman Pencarian Website Jual-Beli Mobil Bekas” menggunakan figma, dan perlu diingat kalau proses ini mencakup beberapa tahapan penting seperti: Persiapan awal: Memahami software atau website figma, hingga pembuatan frame utama yang digunakan sebagai wadah untuk membuat elemen Laman Pencarian.Memahami Struktur Laman Pencarian: Membuat komponen-komponen utama seperti Top bar, left sidebar, breadcrumb, content card, hingga right sidebar beserta komponen card di dalamnya.Memahami Elemen untuk Laman Pencarian: Dengan menambahkan elemen-elemen penting seperti gambar, teks, ikon, dan tombol untuk memberikan informasi yang jelas kepada pengguna.Memahami Style yang digunakan pada Laman Pencarian: Dengan mengatur warna, ukuran, dan jarak antar elemen untuk menciptakan desain laman pencarian yang menarik dan mudah dipahamiMenambahkan elemen interaktif: membuat tombol dan tab menu untuk meningkatkan pengalaman pengguna dalam mengakses informasi yang diberikan. Setelah melalui proses ini, kamu telah berhasil menciptakan laman pencarian yang efektif serta memiliki visual yang menarik, dan pastinya akan membantu, dan memudahkan pengguna yang ingin menemukan mobil impian mereka. Dengan mempelajari, dan menggunakan teknik-teknik yang dipakai dalam tutorial ini, saya berharap dapat membantu kamu diperjalanan sebagai UI/UX Designer 😊😊. Serta jangan lupa untuk terus berlatih figma, serta fitur-fiturnya seperti auto layout dan component, karena akan sangat membantu kamu kedepannya. Sekali lagi saya ucapkan selamat ya untuk kamu karena telah sukses membuat “Laman Pencarian Website Jual-Beli Mobil Bekas”, good job guys 😊😊. Bagaimana? tutorial-nya keren bukan? nah, jika kamu ingin belajar lebih banyak lagi tentang UI/UX dan meningkatkan skill, dan keterampilan desain kamu, maka jangan sampai lewatkan kesempatan untuk mengeksplorasi kelas-kelas UI/UX di BuildWithAngga !!!, karena kamu bisa pelajari teknik-teknik terbaru, dan meningkatkan portofolio kamu, bersama para mentor di bidangnya 🤩🤩🤩. Credit Unsplash: Devon JenseDaniel GumprechtArteum-roKOBU Agencyzan lazarevic312 visualszuka zurabishviliJon Koop

Figma udah jadi sahabat setia para desainer, kan? Tapi, tau gak kalau ada beberapa plugin-nya yang sering terlewat tapi bisa jadi penyelamat hidup? Yuk, pada artikel kali ini kita bahas 5 plugin Figma yang underrated tapi wajib kamu coba! Typeout Typeout ini kayak jagoannya nulis buat desain kamu. Dia bisa ngasih saran-saran tulisan yang pas buat tombol, judul, atau teks lainnya. Kerennya lagi, dia punya banyak gaya tulisan yang bisa kamu pilih buat bikin desain kamu jadi lebih hidup. Typeout ini kayak punya asisten pribadi yang ahli dalam memilih kata-kata. Dia punya banyak pilihan gaya tulisan, dari yang formal sampai yang santai. Jadi, kamu tinggal pilih gaya yang paling cocok dengan desainmu. Selain itu, Typeout juga bisa bantuin kamu menemukan kata-kata yang tepat untuk tombol, judul, atau teks lainnya. Bayangkan, kamu gak perlu lagi pusing-pusing mikirin kata yang pas buat tombol "Beli Sekarang". Kelebihan: Bantuin nulis teks yang lebih menarikBanyak pilihan gaya tulisanHemat waktu mikirin tulisan Kekurangan: Kadang sarannya gak sesuai sama tone desainBelum support bahasa IndonesiaFitur masih terbatas Cara Menggunakan Plugin: Buka file Figma kamu.Save dulu plugin dari Figma CommunityAkses panel plugin dan cari "Typeout".Klik plugin dan pilih elemen teks yang ingin kamu ubah.Pilih gaya tulisan yang diinginkan (misal: judul, body, tombol).Typeout akan secara otomatis menghasilkan teks yang sesuai dengan gaya yang kamu pilih. Color Hunt Suka bingung pilih warna buat desain? Color Hunt ini jawabannya! Kamu bisa ambil banyak palet warna cantik dari website Color Hunt langsung ke Figma. Tinggal klik-klik aja, warna langsung jadi! Praktis banget! Di sini, kamu bisa nemuin ribuan kombinasi warna yang cantik dan harmonis. Tinggal pilih palet yang kamu suka, lalu tinggal seret ke desainmu. Gak perlu lagi pusing-pusing cari warna yang cocok. Kelebihan: Banyak pilihan palet warnaMudah digunakanBisa bikin desain jadi lebih harmonis Kekurangan: Red LinesKadang sulit menemukan warna yang tepatTidak bisa custom warna secara detailKetergantungan pada palet yang tersedia Cara Menggunakan Plugin: Buka file Figma kamu.Search "Color Hunt" di browser-muKlik pilihan palet warna yang kamu suka.Copy dan paste kodes warna dari palet ke objek yang ingin kamu warnai. Red Lines Nyerahin desain ke developer itu ribet banget, kan? Harus kasih ukuran, spesifikasi, dan segala macem. Nah, Red Lines ini bisa bantuin kamu bikin catatan detail di desain kamu. Jadi, developer gak bakal bingung lagi. Red Lines adalah plugin yang sangat membantu dalam proses handover desain ke developer. Dengan Red Lines, kamu bisa menambahkan anotasi, ukuran, dan spesifikasi detail pada desainmu sehingga developer lebih mudah memahami maksud desainmu. Kelebihan: Hemat waktu buat bikin anotasiDesain jadi lebih jelas buat developerBisa bikin desain lebih profesional Kekurangan: Kurang fleksibel untuk jenis anotasi tertentuBelajar pakai fiturnya butuh waktuKadang interface-nya agak ribet Cara Menggunakan Plugin: Buka file Figma kamu.Save dulu plugin dari Figma CommunityAkses panel plugin dan cari "Redlines".Klik plugin dan pilih elemen yang ingin kamu berikan anotasi.Tambahkan catatan, ukuran, jarak, atau informasi lainnya yang diperlukan. Ghost Nunggu loading screen itu lama banget, kan? Ghost bisa bantu kamu bikin loading screen yang keren dan gak bikin user bete. Tinggal klik satu kali, loading screen langsung jadi! Dengan plugin ini, kamu bisa membuat loading screen yang terlihat lebih hidup dan tidak membosankan. Ghost menyediakan berbagai macam animasi loading yang bisa kamu sesuaikan dengan desainmu. Kelebihan*:* Cepet bikin loading screenBanyak variasi loading screenBikin desain terlihat lebih profesional Kekurangan*:* Pilihan customization terbatasKadang hasilnya kurang sesuai dengan desainBelum support animasi yang kompleks Cara Menggunakan Plugin: Buka file Figma kamu.Save dulu plugin dari Figma CommunityAkses panel plugin dan cari "Ghost".Klik plugin dan pilih style loading screen yang diinginkan.Sesuaikan warna dan animasi sesuai dengan desainmu. Lorem Ipsum Lorem Ipsum adalah teks standar yang sering digunakan dalam desain untuk mengisi ruang kosong sementara. Plugin Lorem Ipsum di Figma memudahkan kamu untuk menambahkan teks dummy ini ke dalam desainmu dengan cepat dan mudah. Kelebihan: Menghemat waktu dalam mengisi teks dummy pada banyak elemen desain.Banyak opsi untuk mengatur jumlah paragraf, kalimat, dan kata.Antarmuka yang sederhana dan intuitif. Kekurangan: Teks yang dihasilkan hanya berupa placeholder dan tidak memiliki makna.Beberapa plugin mungkin memiliki opsi kustomisasi yang terbatas.Untuk konten yang membutuhkan konteks atau informasi spesifik, teks Lorem Ipsum tidak relevan. Cara Menggunakan Plugin Buka file Figma kamuSave dulu plugin dari Figma Community.Akses panel plugin dan cari "Lorem Ipsum".Klik plugin dan pilih elemen teks yang ingin kamu isi.Atur jumlah paragraf, kalimat, dan kata yang diinginkan. Penutup Dengan memanfaatkan plugin-plugin ini, kamu bisa meningkatkan produktivitas, menghasilkan desain yang lebih berkualitas, dan tentunya, membuat klien kamu puas. Jadi, tunggu apalagi? Yuk, coba plugin-plugin ini sekarang! Bingung mau start belajar UI/UX di mana? Yuk gabung ke kelas-kelas UI/UX BuidlWithAngga dan asah *skill-*mu sembari membangun portfolio berkualitas! Ingat, tools ini hanya pelengkap. Kreativitas dan ide orisinal tetap menjadi kunci utama dalam desain. Namun, dengan bantuan plugin-plugin ini, kamu bisa lebih fokus pada aspek kreatif desainmu 🤩