Tips All

Pernahkah kamu merasa kesulitan membedakan warna merah dan hijau pada sebuah grafik atau logo? Mungkin kamu memiliki kondisi yang disebut buta warna atau color vision deficiency. Buta warna bukanlah berarti seseorang hanya melihat dalam skala hitam putih, melainkan kesulitan dalam membedakan warna tertentu. Kondisi ini umumnya disebabkan oleh faktor genetik dan lebih sering terjadi pada laki-laki. Bayangkan jika kamu adalah seorang desainer grafis yang memiliki buta warna. Tentu akan sangat sulit untuk menciptakan desain yang menarik dan efektif jika tidak memperhatikan aspek warna. Warna tidak hanya berfungsi sebagai elemen estetika, tetapi juga memiliki makna dan konotasi tertentu. Misalnya, warna merah sering dikaitkan dengan bahaya atau semangat, sedangkan warna biru sering dikaitkan dengan ketenangan atau kepercayaan. Pada artikel kali ini, kita akan membahas beberapa tools desain interface untuk pengidap buta warna! 💘 Who Can Use "Who Can Use" tools adalah alat bantu yang dirancang khusus untuk membantu desainer mengevaluasi aksesibilitas desain mereka, terutama bagi pengguna dengan disabilitas visual seperti buta warna. Alat ini memungkinkan kamu untuk melihat bagaimana desainmu akan terlihat oleh seseorang yang memiliki jenis buta warna tertentu. Dengan kata lain, alat ini seperti "kacamata" virtual yang memungkinkanmu untuk "merasakan" kesulitan yang dialami oleh pengguna dengan buta warna saat berinteraksi dengan desainmu. Mengapa Penting? Inklusivitas: Dengan menggunakan alat ini, kamu memastikan desainmu dapat diakses oleh semua orang, termasuk mereka yang memiliki buta warna.Pengalaman Pengguna yang Lebih Baik: Desain yang ramah buta warna akan membuat semua pengguna merasa lebih nyaman dan mudah dalam menggunakan produk atau layananmu.Kompatibilitas: Desain yang baik akan sesuai dengan standar aksesibilitas yang berlaku, sehingga produkmu dapat digunakan oleh lebih banyak orang. Khroma Khroma adalah sebuah alat yang sangat berguna bagi desainer yang ingin memastikan karya mereka dapat diakses oleh semua orang, termasuk mereka yang memiliki buta warna. Alat ini dirancang khusus untuk membantu desainer memilih kombinasi warna yang sesuai dan memastikan kontras warna yang cukup sehingga desain dapat dinikmati oleh semua pengguna. Apa yang Membuat Khroma Spesial? Simulasi Buta Warna yang Akurat: Khroma memungkinkan kamu untuk melihat bagaimana desainmu akan terlihat oleh seseorang yang mengalami buta warna jenis protanopia, deuteranopia, atau tritanopia. Ini sangat membantu dalam mengidentifikasi masalah warna yang mungkin tidak terlihat oleh mata normal.Palet Warna yang Aman: Khroma menyediakan berbagai palet warna yang telah diuji dan dipastikan aman untuk digunakan oleh pengguna dengan buta warna. Kamu bisa memilih palet warna yang sesuai dengan gaya desainmu.Pengecekan Kontras: Alat ini akan secara otomatis memeriksa kontras antara warna teks dan latar belakang. Kamu akan mendapatkan peringatan jika kontrasnya terlalu rendah sehingga sulit dibaca.Integrasi dengan Software Desain: Khroma dapat diintegrasikan dengan berbagai software desain populer seperti Adobe Photoshop, Sketch, dan Figma, sehingga kamu bisa langsung menggunakannya dalam proses desainmu. ColorBox ColorBox adalah sebuah alat bantu desain yang dirancang khusus untuk membantu para desainer memastikan karya mereka dapat diakses oleh semua orang, termasuk mereka yang memiliki buta warna. Alat ini memberikan berbagai fitur yang sangat berguna untuk mengevaluasi dan memperbaiki kombinasi warna dalam desain sehingga lebih ramah bagi pengguna dengan gangguan penglihatan warna. Apa yang Membuat ColorBox Istimewa? Simulasi Buta Warna Real-time: ColorBox memungkinkan kamu melihat secara langsung bagaimana desainmu akan terlihat oleh seseorang yang mengalami buta warna jenis protanopia, deuteranopia, atau tritanopia. Kamu bisa melihat perubahan warna secara real-time saat mengedit desainmu.Palet Warna yang Disesuaikan: ColorBox menyediakan berbagai palet warna yang telah disesuaikan untuk pengguna dengan buta warna. Palet-palet ini telah diuji dan dipastikan aman untuk digunakan sehingga kamu tidak perlu khawatir memilih kombinasi warna yang salah.Pengecekan Kontras: Alat ini akan secara otomatis menghitung rasio kontras antara warna teks dan latar belakang. Kamu akan mendapatkan peringatan jika kontrasnya terlalu rendah sehingga sulit dibaca oleh pengguna dengan gangguan penglihatan warna. Happy Hue Happy Hue adalah sebuah alat bantu desain yang dirancang khusus untuk membantu para desainer menciptakan karya yang indah dan sekaligus mudah diakses oleh semua orang, termasuk mereka yang memiliki buta warna. Alat ini menawarkan berbagai fitur menarik yang dapat membantu kamu memastikan desainmu ramah bagi pengguna dengan gangguan penglihatan warna. Lalu Apa Sih yang Membuat Happy Hue Istimewa? Simulasi Buta Warna Interaktif: Happy Hue memungkinkan kamu melihat secara langsung bagaimana desainmu akan terlihat oleh seseorang yang mengalami buta warna. Kamu bisa berinteraksi dengan desainmu secara real-time dan melihat perubahan warna yang terjadi.Palet Warna yang Dipersonalisasi: Alat ini menawarkan berbagai palet warna yang telah disesuaikan untuk pengguna dengan buta warna. Kamu bisa memilih palet yang sesuai dengan gaya desainmu atau bahkan membuat palet warna kamu sendiri.Pengecekan Kontras yang Cerdas: Happy Hue secara otomatis menghitung rasio kontras antara warna teks dan latar belakang. Selain itu, alat ini juga memberikan rekomendasi tentang kombinasi warna yang memiliki kontras yang baik.Tutorial dan Panduan yang Lengkap: Happy Hue menyediakan berbagai tutorial dan panduan yang mudah dipahami untuk membantu kamu memulai dan memaksimalkan penggunaan alat ini. Color Safe Color Safe adalah alat yang sangat berguna bagi desainer yang ingin memastikan karya mereka dapat diakses oleh semua orang, termasuk mereka yang memiliki buta warna. Alat ini difokuskan pada satu hal utama: membantu desainer memilih kombinasi warna yang aman dan indah, namun tetap mudah dibedakan oleh pengguna dengan gangguan penglihatan warna. Apa yang Membuat Color Safe Istimewa? Palet Warna yang Teruji: Color Safe menyediakan berbagai palet warna yang telah diuji dan dipastikan memenuhi standar aksesibilitas WCAG (Web Content Accessibility Guidelines) terkait rasio kontras antara teks dan latar belakang. Ini berarti kombinasi warna yang dihasilkan tidak hanya estetis, tetapi juga mudah dibaca oleh semua orang, termasuk mereka yang memiliki buta warna.Fokus pada Kontras: Alat ini sangat memperhatikan aspek kontras warna. Kontras yang cukup tinggi antara warna teks dan latar belakang sangat penting untuk memastikan keterbacaan, terutama bagi pengguna dengan buta warna.Penggunaan yang Mudah: Color Safe memiliki antarmuka yang sederhana dan intuitif, sehingga mudah digunakan oleh desainer dengan berbagai tingkat keahlian. Kamu hanya perlu memilih palet warna yang kamu suka, dan alat ini akan memberikan informasi tentang rasio kontras dan apakah kombinasi warna tersebut aman untuk digunakan. Adobe Color Adobe Color, yang dulunya dikenal sebagai Adobe Kuler, adalah alat online yang sangat populer di kalangan desainer untuk membuat dan menyimpan palet warna. Meskipun tidak dirancang khusus untuk buta warna, Adobe Color memiliki beberapa fitur yang dapat membantu desainer menciptakan palet warna yang lebih inklusif. Mengapa Adobe Color Cocok untuk Orang yang Buta Warna? Pengecekan Kontras: Fitur ini sangat krusial. Dengan memeriksa kontras antara dua warna, desainer dapat memastikan bahwa teks atau elemen penting lainnya dalam desain cukup terlihat, bahkan bagi mereka yang memiliki kesulitan membedakan warna tertentu. Kontras yang baik adalah kunci untuk memastikan aksesibilitas visual.Palet Warna yang Beragam: Adobe Color menyediakan jutaan palet warna yang bisa menjadi inspirasi. Meskipun tidak semua palet dirancang dengan mempertimbangkan buta warna, kamu bisa menemukan palet yang memiliki kontras tinggi atau label "accessible" yang bisa menjadi titik awal yang baik.Pembuatan Palet Kustom: Fitur ini memungkinkan desainer untuk membuat palet warna sendiri yang sesuai dengan kebutuhan proyek. Dengan demikian, desainer dapat memastikan bahwa setiap kombinasi warna yang digunakan memiliki kontras yang cukup dan mudah dibedakan. Kesimpulan 💭 Sebagai seseorang dengan buta warna, menggunakan alat-alat desain ini bisa jadi sangat membantu. Alat-alat ini dirancang untuk membantu kita memahami bagaimana orang lain melihat desain kita, terutama dalam hal warna. Mari kita bahas satu per satu: Khroma: Khroma adalah pilihan yang sangat baik karena menawarkan simulasi buta warna yang sangat akurat. Dengan Khroma, kita bisa melihat langsung bagaimana desain kita akan terlihat oleh orang dengan berbagai jenis buta warna. Ini sangat membantu dalam membuat keputusan desain yang lebih inklusif.Who Can Use: Alat ini fokus pada pengujian aksesibilitas secara keseluruhan, termasuk buta warna. Selain simulasi warna, Who Can Use juga memberikan rekomendasi perbaikan untuk meningkatkan aksesibilitas desain.Colorbox: Colorbox sangat berguna untuk memeriksa kontras warna. Kita bisa melihat apakah kombinasi warna yang kita pilih cukup kontras untuk dibaca oleh semua orang, termasuk mereka yang memiliki buta warna.Happy Hue: Happy Hue menawarkan antarmuka yang user-friendly dan tutorial yang mudah diikuti. Ini membuat alat ini cocok untuk pemula yang ingin belajar tentang desain yang inklusif.Color Safe: Seperti namanya, Color Safe fokus pada pemilihan palet warna yang aman untuk orang dengan buta warna. Alat ini menyediakan database warna yang telah teruji dan dipastikan mudah dibedakan.Adobe Color: Meskipun tidak dirancang khusus untuk buta warna, Adobe Color memiliki fitur pengecekan kontras yang sangat berguna. Kita bisa menggunakannya untuk memastikan bahwa desain kita memenuhi standar aksesibilitas. Kelebihan Menggunakan Alat-Alat Ini: Memahami Persepsi Warna: Alat-alat ini membantu kita memahami bagaimana orang dengan buta warna melihat desain kita.Meningkatkan Aksesibilitas Desain: Desain yang dibuat dengan bantuan alat-alat ini akan lebih mudah diakses oleh semua orang, termasuk mereka yang memiliki buta warna. Kekurangan: Tidak Menggantikan Pengujian Manusia: Meskipun alat-alat ini sangat membantu, sebaiknya kita juga melibatkan orang dengan buta warna dalam proses pengujian desain untuk mendapatkan umpan balik yang lebih akurat.Kurva Pembelajaran: Beberapa alat mungkin memiliki kurva pembelajaran yang cukup curam, terutama bagi pengguna pemula. Dengan menggunakan alat-alat desain ini, kita sebagai orang yang buta warna bisa menjadi desainer yang lebih baik dan lebih inklusif. Alat-alat ini memberikan kita kendali yang lebih besar atas desain kita dan membantu kita memastikan bahwa desain kita dapat dinikmati oleh semua orang. Gimana? Memiliki kekurangan tidak akan membatasimu untuk tetap berkreasi loh! Kalau kamu mau belajar UI/UX design, kamu bisa ikuti kelas-kelas UI/UX di BuildWithAngga dan asah skill-mu sebagai seorang desainer hebat! 🤩

Pernah merasa jenuh dengan Poppins? Meskipun font ini serbaguna dan populer, terkadang eksplorasi dan inovasi diperlukan untuk membuat proyek desainmu semakin segar dan berkarakter. Kabar baiknya, dunia tipografi menawarkan berbagai pilihan menarik untuk membangkitkan kualitas visual. Kenapa pemilihan font itu penting? Mengirimkan pesan yang tepat: Setiap font punya karakteristiknya sendiri. Ada font yang terlihat formal, friendly, modern, atau bahkan retro. Dengan memilih font yang tepat, kamu bisa langsung menyampaikan pesan yang ingin kamu sampaikan tanpa perlu banyak kata.Meningkatkan keterbacaan: Bayangkan kamu baca buku dengan font yang terlalu kecil atau terlalu rumit. Pasti cepat capek mata dan susah fokus, kan? Font yang baik itu mudah dibaca, sehingga pesanmu bisa tersampaikan dengan jelas.Membangun identitas merek: Jika kamu punya bisnis, pemilihan font yang konsisten bisa membantu membangun identitas merek yang kuat. Orang akan lebih mudah mengingat merekmu karena ciri khas font yang kamu gunakan.Menarik perhatian: Font yang unik dan menarik bisa membuat desainmu lebih menonjol dan menarik perhatian. Tapi ingat, jangan sampai terlalu berlebihan ya! Di artikel kali ini, kita akan membahas 5 Font Alternatif dari Poppins agar font desainmu lebih beragam! Urbanist: Perpaduan Sempurna Klasik dan Modern untuk Desain yang Menawan ✨ Urbanist, adalah font neo-grotesk yang memadukan gaya klasik sans-serif dengan sentuhan modern, menghadirkan tampilan bersih dan profesional yang ideal untuk berbagai proyek desain. Garisnya yang halus dan rapi memberikan kesan berkelas dan elegan, menjadikannya pilihan tepat untuk desain UI/UX yang membutuhkan keterbacaan tinggi dan estetika modern. Urbanist juga membuat keanggunan sempurna untuk desain editorial seperti majalah dan buku, di mana nuansa klasik dan modern menjadi satu untuk menghasilkan karya yang menawan dan berkesan. Karakteristik Font Urbanist: Sans-serif geometris: Urbanist memiliki bentuk yang sangat bersih dan teratur, terinspirasi dari tipografi dan desain Modernis.Modern: Tampilannya yang modern dan netral membuatnya cocok untuk desain yang ingin terlihat kekinian.Terbaca dengan baik: Desain yang sederhana dan terstruktur membuat Urbanist mudah dibaca, bahkan dalam ukuran yang kecil. Manrope: Modernitas Minimalis untuk Desain Menakjubkan Manrope adalah font geometris dengan garis lurus dan lengkungan presisi yang memancarkan kesan modern dan minimalis. Nuansanya yang kekinian membuatnya ideal untuk desain website, aplikasi, dan branding yang ingin tampil segar. Kesederhanaan desainnya menjadikan Manrope cocok untuk teks panjang dan mudah dibaca tanpa terasa ramai, sehingga semua pesanmu tersampaikan dengan jelas dan efektif 🥰 Karakteristik Font Manrope Sans-serif modern: Manrope memiliki desain yang bersih, minimalis, dan sangat modern.Tingkat kontras sedang: Ketebalan garis pada huruf-hurufnya cukup bervariasi, memberikan tampilan yang dinamis namun tetap mudah dibaca.Nuansa ramah dan hangat: Meskipun modern, Manrope memiliki nuansa yang sedikit lebih ramah dan hangat dibandingkan dengan beberapa font sans-serif lainnya. Libre Franklin: Perpaduan Klasik dan Modern yang Elegan 💕 Libre Franklin menghadirkan perpaduan sempurna antara klasik dan modern. Font ini terinspirasi dari serif klasik seperti Times New Roman, Libre Franklin memberikan nuansa mewah dan berkelas. Namun, adaptasinya ke gaya sans-serif membuatnya tetap relevan dan cocok untuk desainmu yang modern. Kesan klasik ini menjadikannya pilihan ideal untuk desain buku, majalah, dan editorial lainnya yang ingin tampil profesional dan berkelas. Karakteristik Font Libre: Serbaguna: Dengan berbagai varian, Libre sangat fleksibel dan dapat digunakan untuk berbagai jenis teks, mulai dari judul hingga paragraf.Nuansa netral: Libre memiliki nuansa yang cukup netral, sehingga cocok dipadukan dengan berbagai gaya desain.Tingkat kontras sedang: Ketebalan garis pada huruf-hurufnya cukup bervariasi, memberikan tampilan yang dinamis namun tetap mudah dibaca. Public Sans: Membangun Koneksi Melalui Desain yang Ramah dan Mudah Dibaca Public Sans menghadirkan nuansa humanis dalam desain melalui bentuk hurufnya yang membulat dan proporsional. Kesan ramah dan mudah didekati ini menjadikannya pilihan tepat untuk membangun hubungan emosional dengan pengguna, seperti pada website edukasi atau organisasi non-profit. Keterbacaan optimal bisa ada melalui jarak antar huruf yang ideal dan bentuk huruf yang jelas memastikan kenyamanan pembaca saat menjelajahi teks panjang ✨ Karakteristik Font Public Sans: Sans-serif modern: Public Sans memiliki desain yang bersih, minimalis,Tingkat kontras rendah: Ketebalan garis pada huruf-hurufnya relatif konsisten, memberikan tampilan yang bersih dan mudah dibaca.Terinspirasi dari kaligrafi: Meskipun terlihat minimalis, Public Sans memiliki sedikit sentuhan kaligrafi yang memberikan nuansa yang lebih manusiawi. Outfit: Keberanian Geometris yang Menarik Perhatian Outfit melangkah lebih jauh dari font geometris biasa dengan sentuhan keberanian yang tak terbantahkan. Garis lurus dan lengkungan presisi, seperti Manrope, menjadi fondasi font ini, namun dengan ketebalan huruf yang bervariasi dan garis tajam yang memberikan kesan percaya diri. Detail unik seperti garis diagonal pada huruf "Q" dan "R" menjadikannya menonjol dan mudah diingat. Outfit adalah pilihan ideal untuk desain editorial yang ingin tampil beda dan menarik perhatian pembaca. Karakteristik Utama Font Outfit: Sans-serif modern: Outfit memiliki desain yang sangat khas dengan bentuk huruf yang sederhana dan proporsional.Tingkat kontras sedang: Ketebalan garis pada huruf-hurufnya cukup bervariasi, memberikan tampilan yang dinamis namun tetap mudah dibaca,Nuansa netral: Outfit memiliki nuansa yang netral, sehingga cocok dipadukan dengan berbagai warna dan gaya desain. Tips: Kombinasikan: Manfaatkan kombinasi font untuk memperkaya desainmu. Contohnya, gunakan Manrope untuk headline dan Public Sans untuk body text.Kontras: Jangan lupa untuk perhatikan kontras antara warna font dan background untuk memastikan keterbacaan optimal.Hierarki: Gunakan ukuran dan bobot font yang berbeda untuk membangun hierarki visual dalam desainmu. Dengan memahami karakteristik dan tips di atas, kamu dapat memilih font alternatif Poppins yang tepat untuk project desainmu dan ciptakan karya yang menarik, profesional, dan mudah dibaca 🤩 Dengan berbagai font yang tersedia, Figma semakin menjadi alat yang tak tergantikan bagi para desainer yang ingin menciptakan user experience yang luar biasa. Tertarik mempelajari dunia UI/UX lebih lanjut? Pelajari kelas-kelas UI/UX gratis di BuildWithAngga lalu persiapkan skill untuk menjadi seorang UI/UX designer yang hebat! Psstt, jika kamu tertarik membuat UI design di atas, kamu bisa cek link berikut untuk belajar “Tutorial Bikin UI Design untuk Aplikasi Order Makanan” yaa 🤩 👋🏻 See you di tips-tips lainnya!

CRUD (Create, Read, Update, Delete) adalah fitur dasar yang menjadi tulang punggung hampir semua website dalam mengelola data bisnis dan customer. Sebagai developer, kemampuan untuk membuat dan mengoptimalkan fitur CRUD adalah suatu keharusan. Dalam artikel ini, kita akan membahas lima tips penting untuk coding CRUD menggunakan Laravel 11, sebuah framework PHP yang dikenal aman, mudah dipelajari, dan sangat fleksibel untuk dikembangkan. Mengapa CRUD Penting dalam Web Development? CRUD adalah fitur inti dalam kebanyakan aplikasi web, memungkinkan pengguna untuk berinteraksi dengan data seperti menambah, melihat, mengedit, dan menghapus informasi. Contoh sederhana adalah fitur manajemen produk pada toko online, di mana admin dapat menambah produk baru, melihat daftar produk, mengedit informasi produk, atau menghapus produk yang tidak lagi dijual. Laravel: Framework Popular untuk CRUD Laravel adalah salah satu framework PHP paling populer yang banyak digunakan oleh developer karena keamanannya, kemudahan penggunaannya, dan skalabilitasnya. Dengan Laravel, membuat fitur CRUD menjadi lebih mudah berkat fitur bawaan seperti Eloquent ORM, routing, dan blade templating. Laravel juga menawarkan keamanan yang kuat dengan fitur seperti CSRF protection dan query builder yang mencegah SQL injection. 5 Tips Coding CRUD Menggunakan Laravel 11 1. Gunakan Artisan Commands untuk Membuat CRUD Lebih Cepat Laravel menyediakan berbagai Artisan commands yang sangat membantu dalam mempercepat proses development. Anda bisa menggunakan perintah php artisan make:model, php artisan make:controller, dan php artisan make:migration untuk membuat model, controller, dan migration dengan cepat. Langkah-langkah: Buat model dengan command: php artisan make:model Product -m Perintah ini akan membuat model Product beserta file migration untuk database. Buat controller dengan command: php artisan make:controller ProductController --resource Perintah ini akan membuat controller ProductController dengan metode CRUD (index, create, store, show, edit, update, destroy). Buat migration untuk tabel products: Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); $table->text('description'); $table->decimal('price', 8, 2); $table->timestamps(); }); 2. Manfaatkan Eloquent ORM untuk Interaksi Database Eloquent ORM adalah fitur Laravel yang memungkinkan Anda untuk berinteraksi dengan database menggunakan syntax PHP yang lebih intuitif dan mudah dipahami. Ini memudahkan proses coding CRUD karena Anda tidak perlu menulis query SQL secara manual. Langkah-langkah: Membuat data baru (Create): $product = new Product; $product->name = 'Product Name'; $product->description = 'Product Description'; $product->price = 99.99; $product->save(); Mengambil data (Read): $products = Product::all(); Mengupdate data (Update): $product = Product::find(1); $product->name = 'Updated Name'; $product->save(); Menghapus data (Delete): $product = Product::find(1); $product->delete(); 3. Validasi Data dengan Request Validation Validasi adalah langkah penting dalam CRUD untuk memastikan data yang disimpan dalam database sesuai dengan aturan yang diinginkan. Laravel menyediakan mekanisme validasi yang kuat melalui Request class. Langkah-langkah: Buat request validation dengan command: php artisan make:request StoreProductRequest Tambahkan aturan validasi: public function rules() { return [ 'name' => 'required|max:255', 'description' => 'required', 'price' => 'required|numeric', ]; } Gunakan request validation di controller: public function store(StoreProductRequest $request) { Product::create($request->validated()); } 4. Gunakan Pagination untuk Mengelola Data dengan Baik Jika Anda memiliki banyak data, pagination akan sangat membantu untuk menampilkan data dalam bentuk yang lebih teratur dan mudah diakses. Laravel memiliki fitur pagination bawaan yang sangat mudah digunakan. Langkah-langkah: Menggunakan pagination di controller: public function index() { $products = Product::paginate(10); return view('products.index', compact('products')); } Tampilkan pagination links di view: {{ $products->links() }} 5. Implementasikan Soft Deletes untuk Menghindari Kehilangan Data Penting Soft deletes memungkinkan Anda untuk "menghapus" data tanpa benar-benar menghapusnya dari database. Data yang dihapus dengan soft deletes masih bisa dikembalikan jika diperlukan. Langkah-langkah: Tambahkan SoftDeletes trait pada model: use Illuminate\\\\Database\\\\Eloquent\\\\SoftDeletes; class Product extends Model { use SoftDeletes; } Tambahkan kolom deleted_at pada migration: $table->softDeletes(); Mengembalikan data yang sudah dihapus (restore): $product = Product::withTrashed()->find(1); $product->restore(); Kesalahan Umum dalam Membuat CRUD dan Cara Menghindarinya Meskipun CRUD terlihat sederhana, ada beberapa kesalahan umum yang sering terjadi, terutama bagi pemula. Berikut beberapa contohnya beserta solusi untuk menghindarinya: 1. Tidak Menggunakan Validation Salah satu kesalahan yang sering terjadi adalah tidak menerapkan validasi data dengan baik. Tanpa validasi, data yang tidak sesuai atau tidak lengkap bisa masuk ke dalam database, yang pada akhirnya bisa menyebabkan error atau bahkan crash pada aplikasi. Validasi penting untuk memastikan bahwa data yang diterima sudah sesuai dengan aturan yang ditetapkan. Contoh Koding: // Validation dalam Laravel menggunakan Request class public function store(Request $request) { $validatedData = $request->validate([ 'name' => 'required|max:255', 'email' => 'required|email|unique:users,email', 'password' => 'required|min:8', ]); // Jika validasi sukses, data akan disimpan User::create($validatedData); } Pada contoh di atas, sebelum data disimpan ke dalam database, validasi dilakukan untuk memastikan bahwa name, email, dan password memenuhi syarat yang telah ditentukan. Jika data tidak valid, Laravel akan otomatis mengembalikan respon error. 2. Tidak Mengimplementasikan Soft Deletes Kesalahan lain yang umum adalah langsung menghapus data dari database tanpa menggunakan fitur Soft Deletes. Menghapus data secara permanen bisa berisiko, terutama jika data tersebut diperlukan kembali di masa mendatang. Dengan menggunakan Soft Deletes, Anda bisa "menghapus" data dari pandangan pengguna tanpa benar-benar menghapusnya dari database, sehingga data tersebut masih bisa dipulihkan jika diperlukan. Contoh Koding: use Illuminate\\\\Database\\\\Eloquent\\\\SoftDeletes; class Product extends Model { use SoftDeletes; // Properti $dates untuk menyimpan tanggal soft delete protected $dates = ['deleted_at']; } // Menghapus data dengan soft delete $product = Product::find(1); $product->delete(); // data tidak dihapus dari database, hanya disembunyikan // Mengembalikan data yang dihapus $product->restore(); // data yang dihapus dengan soft delete dikembalikan Dengan menggunakan trait SoftDeletes, Anda dapat menghindari risiko kehilangan data yang tidak disengaja. Data yang dihapus masih dapat diakses kembali jika diperlukan dengan menggunakan metode restore. 3. Tidak Menggunakan Mass Assignment Protection Laravel memiliki fitur Mass Assignment Protection yang melindungi model dari pengisian atribut yang tidak diinginkan secara massal. Kesalahan umum adalah tidak menetapkan properti $fillable pada model, yang dapat menyebabkan kerentanan pada aplikasi Anda. Contoh Koding: class User extends Model { // Tentukan atribut yang bisa diisi secara massal protected $fillable = ['name', 'email', 'password']; } // Menyimpan data dengan mass assignment User::create([ 'name' => 'John Doe', 'email' => '[email protected]', 'password' => bcrypt('password123'), ]); Dengan menentukan properti $fillable, Anda melindungi model dari pengisian atribut yang tidak diinginkan. Ini sangat penting untuk menjaga keamanan aplikasi Anda. Ringkasan dan Saran untuk Programmer Pemula Membuat fitur CRUD dengan Laravel 11 sebenarnya sangat mudah, terutama dengan bantuan fitur-fitur bawaan yang powerful. Namun, agar lebih efisien dan aman, ada beberapa tips yang perlu diperhatikan seperti penggunaan Artisan commands, Eloquent ORM, validasi data, pagination, dan soft deletes. Jika Anda ingin memperdalam kemampuan Laravel Anda, belajar dari mentor Buildwithangga bisa menjadi pilihan terbaik. Anda akan mendapatkan akses seumur hidup ke materi belajar, bonus konsultasi dengan mentor yang berpengalaman, bergabung dengan grup diskusi antar student, dan mendapatkan persiapan kerja yang lebih matang. Semua ini akan membantu Anda menjadi developer yang lebih baik dan siap menghadapi tantangan di dunia kerja!

Halo semua. Untuk tutorial kali ini, kita akan melanjuti dari artikel kemarin membuat aplikasi booking tiket film. Halaman yang akan dibuat ada empat yaitu halaman pembayaran dan halaman payment complete. Halaman pembayaran adalah halaman di mana saat user ingin melakukan pembayaran di mana kasus ini melakukan transfer manual. Sedangkan halaman payment complete merupakan halaman setelah user melakukan pembayaran akan dibawah ke halaman ini yang menunjukkan pembayaran berhasil. 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 Pembayaran 1. Memilih frame Oke untuk halaman pertama kita akan membuat halaman pembayaran 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 “Payment” = 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 3. Membuat desain container manual transfer Komponen yang akan dibuat yaitu manual transfer yang dimana user akan melihat menggunakan bank dan nomor rekening apa yang ditransfer. Juga dilengkapi timer untuk memastikan user untuk bayar Berikut langkahnya: Buat teks “Manual Transfer” = Poppins, 14, bold, warna #13181DBuat teks “Please transfer before in” = Poppins, 12, medium, warna #13181DBuat teks “14:59” = Poppins, 12, medium, warna #FFFFFFSelect teks “14:59” jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal padding: 4Vertical padding: 4Rezize width: 57px, height: 28pxRename object menjadi “timer” pada layer panel di sebelah kiriSelect timer, letakkan di samping kanan teks “Please transfer before in”Select timer dan teks “Please transfer before in” jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal gap between items: autoRezize width: 358px, height: 28pxRename object menjadi “timer+teks” pada layer panel di sebelah kiri Untuk ini kita akan membuat nama banknya dan nomor rekening. Berikut langkahnya: Buat rectangle menggunakan shape tools di figma (menekan huruf “R” pada keyboard) dengan ukuran width: 99px, height: 62px , corner radius: 20 dan beri warna #FFFFFFMasukkan logo BCA. Untuk assetnya dapat diambil dari Figma Community dari link ini. Rezize width: 71px dan height: 50pxKemudian select kedua object dan beri align horizontal centers dan align vertical centers dan kedua object tekan Ctrl+G pada keyboard untuk digabungkan menjadi satu.Buat teks “Bank BCA” = Poppins, 14, medium, warna #13181DBuat teks “PT. MovieTCKT Indonesia” = Poppins, 14, medium, warna #13181DSelect teks “PT. MovieTCKT Indonesia”, letakkan di bawah teks “Bank BCA”Select kedua teks jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: top leftVertical gap between items: 4Rename object menjadi “bank+company name” pada layer panel di sebelah kiri Select bank+company name letakkan di samping kanan logo bankSelect keduanya jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: leftHorizontal gap between items: 16Rename object menjadi “bank name” pada layer panel di sebelah kiri Berikut langkahnya Buat teks “1234567890” = Poppins, 14, regular, warna #B2B5BAMasukkan ikon copy tipe outline dari Iconsax ukuran 24px. Beri warna #13181D, letakkan di samping kanan teks “1234567890”Select teks “1234567890” dan ikon jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftHorizontal padding: 14pxVertical padding: 16pxBeri warna fill #E8E8E8Corner radius: 20Rezize width: 358px, height: 56pxRename object menjadi “input field” pada layer panel di sebelah kiri Select timer+teks letakkan di bawah teks “Manual Transfer”Select bank name letakkan di bawah timer+teksSelect input field letakkan di bawah bank nameSelect bank name dan input field jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftVertical gap between items: 16Rename object menjadi “Bank details” pada layer panel di sebelah kiri kemudian letakkan di bawah timer+teksSelect **timer+teks ****dan Bank details jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftVertical gap between items: 16Rename object menjadi “timer+bank details” pada layer panel di sebelah kiri kemudian letakkan di bawah teks “Manual Transfer”Select teks teks “Manual Transfer” dan timer+bank details jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftVertical gap between items: 16 4. Membuat desain nominal transfer Di komponen ini kita akan membuat input field untuk nominal transfer. Untuk membuatnya, berikut langkahnya: Buat teks “Nominal Transfer” = Poppins, 14, medium, warna #13181DBuat teks “Rp 103,000” = Poppins, 14, regular, warna #13181DMasukkan ikon copy tipe outline dari Iconsax ukuran 24px. Beri warna #13181D, letakkan di samping kanan teks Rp 103,000Select teks “Rp 103,000” dan ikon **** jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftHorizontal padding: 14pxVertical padding: 16pxBeri warna fill #E8E8E8Corner radius: 20Rezize width: 358px, height: 52pxRename object menjadi “input field” pada layer panel di sebelah kiriSelect input field, letakkan di bawah teks “Nominal Transfer”Select “Nominal Transfer” 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 kiri 5. Membuat desain upload proof payment Komponen ini adalah temapt user akan meng-upload bukti pembayarannya berupa .png/.jpg/.jpeg Untuk membuatanya, berikut langkahnya: Buat teks “Upload Proof Payment” = Poppins, 14, medium, warna #13181DMasukkan ikon document upload tipe outline dari Iconsax ukuran 48px. Beri warna #B2B5BABuat teks “Upload Here” = Poppins, 12, medium, warna #B2B5BABuat teks “Max: 3MB” = Poppins, 12, medium, warna #B2B5BA, letakkan di bawah teks “Upload Here”Buat teks “Format: .jpg, .jpeg, .png” = Poppins, 12, medium, warna #B2B5BA, letakkan di bawah teks “Max: 3MB”Select ketiga teks (“Upload Here”, “Max: 3MB”, “Format: .jpg, .jpeg, .png”) lalu jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 0Rename object menjadi “condition” pada layer panel di sebelah kiriLetakkan di bawah ikon jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top leftVertical gap between items: 0Select ikon dan condition jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top centerVertical gap between items: 16Rename object menjadi “input field” pada layer panel di sebelah kiri, dan letakkan di bawah teks “Upload Proof Payment”Select teks “Upload Proof Payment” dan input field jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: top centerVertical gap between items: 8 6. Membuat desain detail transaction Komponen ini adalah tempat untuk user melihat ringkasan mengenai transaksi pembelian tiket film Berikut langkahnya: Buat teks “Detail Transaction” = Poppins, 14, regular, warna #13181DMasukkan ikon arrow tipe outline dari Iconsax ukuran 24px. Beri warna #13181D, letakkan di samping kanan teks “Detail Transaction”Select teks “Detail Transaction” dan ikon **** jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align: leftHorizontal padding: 14pxVertical padding: 16pxBeri warna fill #E8E8E8Corner radius: 20Rezize width: 358px, height: 52pxRename object menjadi “input field” pada layer panel di sebelah kiri 7. Membuat desain button Pada komponen ini akan dibuat button yang akan navigasi user ke halaman berikutnya setelah upload bukti pembayarannya Berikut langkahnya: Buat teks “I already transfer” = Poppins, 18, semibold, warna #FFFFFFSelect teks jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal padding: 12pxVertical padding: 18pxCorner radius: 20pxRezize width: 358px, height: 56px 8. Menyusun desain-desain komponen Setelah komponen-komponen sudah dibuat, waktunya menyusun komponen-komponen menjadi suatu page. Bisa diikuti dari gambar di atas. Halaman Payment Complete 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 desain popup payment complete Komponen ini akan dibuat bentuk popup yang menunjukkan bahwa upload bukti pembayaran berhasil dan dilengkapi oleh button untuk navigasi ke halaman My Order Berikut langkahnya: Masukkan ikon check dari plugin Figma Iconify ukuran 64px beri warna #F97316Buatlah lingkaran menggunakan tools ellips (menekan huruf “O” pada keyboard). Beri ukuran 80 px. Beri warna fill #FFD0AFSelect ikon dan lingkaran 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. ****Rename object menjadi “checklist” pada layer panel di sebelah kiriBuatlah lingkaran menggunakan tools ellips (menekan huruf “O” pada keyboard). Beri ukuran 120px. Beri warna fill #FFEFE4Select checklist dan lingkaran 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. ****Rename object menjadi “checklist ellips” pada layer panel di sebelah kiri Buat teks “Upload Payment Complete” = Poppin, 20, bold, warna #13181DBuat teks “Your ID Booking have sent to your phone number and email, to see your status payment” = Poppins, 14, medium, warna #13181D, resize width: 318px*, height:* 60px buat align paragraf center **letakkan di bawah teks “Upload Payment Complete”Untuk button buat teks “I already transfer” = Poppins, 18, semibold, warna #FFFFFFSelect teks jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerHorizontal padding: 12pxVertical padding: 18pxCorner radius: 20pxRezize width: 358px, height: 56pxLetakkan di bawah teks “Your ID Booking have sent to your phone number and email, to see your status payment” Select semua object jadikan auto layout (Shift+A pada keyboard**)** lalu ubah opsi:Align: centerVertical gap between items: 24Horizontal padding: 20Vertical padding: 20Beri warna fill #FFFFFFCorner radius: 20px Results Good job! Dengan mengikuti step by step, akhirnya kamu berhasil membuat halaman pembayaran dan halaman payment complete untuk booking tiket film. Awesome!!! Kesimpulan Dari membuat halaman pembayaran dan halaman payment complete kita sudah membantu user untuk melakukan pembayaran sehingga dibawa ke halaman bahwa pembayaran sudah berhasil dilakukan 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!

Dalam dunia web development yang serba cepat, web developer dituntut untuk dapat bekerja dengan efisien tanpa mengorbankan kualitas hasil kerja mereka. Seiring dengan berkembangnya teknologi dan meningkatnya kebutuhan bisnis, kecepatan dalam proses pengembangan website menjadi salah satu faktor kunci kesuksesan. Namun, kecepatan bukan berarti mengabaikan kualitas. Oleh karena itu, memilih tools dan framework yang tepat sangatlah penting untuk memastikan bahwa proses pengembangan dapat berjalan cepat dan tetap menghasilkan produk yang berkualitas tinggi. Salah satu framework yang sangat membantu web developer dalam mencapai tujuan ini adalah Laravel. Laravel tidak hanya memudahkan proses pengembangan dengan arsitektur yang elegan, tetapi juga menyediakan berbagai package dan library yang dapat mempercepat pekerjaan developer. Laravel: Mempermudah Developer Mengembangkan Website Laravel dikenal sebagai salah satu framework PHP yang paling populer di dunia web development. Dengan filosofi "developer happiness," Laravel dirancang untuk membuat pekerjaan developer lebih menyenangkan dan produktif. Laravel menyediakan berbagai fitur yang memudahkan pengembangan, seperti routing, middleware, ORM (Eloquent), dan templating engine (Blade). Namun, yang membuat Laravel benar-benar menonjol adalah ekosistemnya yang luas. Laravel memiliki banyak package dan library yang tersedia, yang dirancang untuk mempercepat dan mempermudah berbagai aspek dalam pengembangan website. Berikut ini adalah beberapa library Laravel yang sangat direkomendasikan untuk mempercepat proses web development. 1. Spatie Spatie adalah salah satu package Laravel yang sangat berguna, terutama dalam mengelola perizinan dan hak akses (permission) pengguna. Package ini memungkinkan developer untuk dengan mudah mengatur role dan permission dalam sebuah aplikasi, membuat sistem kontrol akses yang kompleks menjadi lebih sederhana. Kegunaan Spatie: Mengelola Role dan Permission: Spatie memudahkan developer untuk membuat, mengedit, dan mengelola role serta permission pengguna dalam aplikasi Laravel.Kepatuhan Keamanan: Dengan Spatie, Anda dapat memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses fitur atau data tertentu, meningkatkan keamanan aplikasi.Kemudahan Integrasi: Spatie dapat dengan mudah diintegrasikan dengan berbagai fitur Laravel lainnya, menjadikannya pilihan yang sangat fleksibel. Tata Cara Menggunakan Spatie: Instalasi Spatie: composer require spatie/laravel-permission Publikasikan dan Jalankan Migrasi: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" php artisan migrate Membuat Role dan Permission: use Spatie\\\\Permission\\\\Models\\\\Role; use Spatie\\\\Permission\\\\Models\\\\Permission; Role::create(['name' => 'admin']); Permission::create(['name' => 'edit articles']); Menetapkan Role ke Pengguna: $user = User::find(1); $user->assignRole('admin'); Dengan langkah-langkah sederhana ini, Anda dapat dengan cepat mengatur sistem kontrol akses yang kuat di aplikasi Anda. 2. Laravel Breeze Laravel Breeze adalah starter kit otentikasi sederhana yang menyediakan semua yang Anda butuhkan untuk memulai dengan otentikasi dalam aplikasi Laravel. Breeze dirancang untuk kesederhanaan dan kecepatan, menjadikannya pilihan yang sangat baik untuk prototipe atau proyek yang memerlukan otentikasi dasar. Kegunaan Breeze: Otentikasi Dasar: Breeze menyediakan semua fitur dasar untuk otentikasi pengguna, seperti pendaftaran, login, reset password, dan verifikasi email.Sederhana dan Minimalis: Breeze tidak membawa fitur yang tidak perlu, membuatnya ringan dan mudah disesuaikan.Dukungan Tailwind CSS: Breeze menggunakan Tailwind CSS sebagai default untuk styling, memudahkan developer yang familiar dengan framework CSS ini. Tata Cara Menggunakan Breeze: Instalasi Breeze: composer require laravel/breeze --dev php artisan breeze:install Jalankan Migrations: php artisan migrate Install Dependencies dan Build Frontend: npm install && npm run dev Jalankan Aplikasi: Setelah semua langkah selesai, Anda dapat menjalankan aplikasi dan menggunakan fitur otentikasi dasar yang disediakan oleh Breeze. Dengan Laravel Breeze, Anda dapat dengan cepat menyiapkan sistem otentikasi dasar yang sudah siap pakai, sehingga Anda bisa fokus pada pengembangan fitur lainnya. 3. Laravel Telescope Laravel Telescope adalah alat debugging dan analisis yang sangat berguna untuk aplikasi Laravel. Telescope memberikan insight mendalam tentang apa yang terjadi di dalam aplikasi Anda, memungkinkan Anda untuk dengan cepat mengidentifikasi dan memperbaiki masalah. Kegunaan Telescope: Monitoring Request: Telescope memungkinkan Anda untuk memantau semua request yang masuk ke aplikasi, termasuk query database, exception, log, dan lainnya.Analisis Query: Anda dapat menganalisis query database untuk mengidentifikasi query yang lambat atau tidak efisien.Debugging Exception: Telescope membantu Anda melacak dan menganalisis exception yang terjadi dalam aplikasi, memudahkan proses debugging. Tata Cara Menggunakan Telescope: Instalasi Telescope: composer require laravel/telescope Publikasikan dan Jalankan Migrations: php artisan telescope:install php artisan migrate Mengakses Telescope: Setelah instalasi, Anda dapat mengakses Telescope melalui URL /telescope pada aplikasi Anda. Di sana, Anda akan melihat dashboard yang menampilkan semua informasi dan log yang dikumpulkan oleh Telescope. Dengan Laravel Telescope, Anda dapat memonitor dan menganalisis aplikasi Anda secara mendalam, sehingga memudahkan proses debugging dan optimasi. 4. Filament Filament adalah library Laravel yang dirancang untuk membangun dashboard administrasi yang modern dan dinamis. Filament sangat membantu ketika Anda perlu membuat panel administrasi yang kaya fitur dengan cepat. Kegunaan Filament: CRUD Builder: Filament memudahkan pembuatan operasi CRUD (Create, Read, Update, Delete) dengan antarmuka pengguna yang indah dan responsif.Panel Administrasi: Dengan Filament, Anda dapat dengan cepat membangun panel administrasi yang memungkinkan Anda mengelola data dalam aplikasi Anda dengan mudah.Modular dan Dapat Disesuaikan: Filament dirancang untuk fleksibilitas, memungkinkan developer untuk menyesuaikan fitur dan tampilan sesuai kebutuhan. Tata Cara Menggunakan Filament: Instalasi Filament: composer require filament/filament Membuat Resource untuk CRUD: php artisan make:filament-resource Post Mengakses Panel Administrasi: Setelah resource dibuat, Anda dapat mengakses panel administrasi melalui URL yang telah ditentukan (biasanya /admin). Di sana, Anda akan menemukan semua fitur CRUD yang telah dikonfigurasi. Filament sangat berguna untuk membangun panel administrasi dengan cepat tanpa mengorbankan fleksibilitas dan desain. 5. Laravel Cashier Laravel Cashier adalah package yang menyediakan implementasi Stripe dan Paddle yang ekspresif untuk menangani langganan berulang dalam aplikasi Laravel. Cashier sangat memudahkan integrasi pembayaran dalam aplikasi web, khususnya untuk model bisnis berbasis langganan. Kegunaan Cashier: Integrasi Pembayaran: Cashier menyediakan API yang mudah digunakan untuk mengintegrasikan Stripe dan Paddle ke dalam aplikasi Anda.Manajemen Langganan: Cashier memudahkan manajemen langganan berulang, termasuk pembuatan langganan, pembatalan, dan pengelolaan pembayaran.Dukungan Multicurrency: Cashier mendukung berbagai mata uang, membuatnya fleksibel untuk bisnis global. Tata Cara Menggunakan Cashier: Instalasi Cashier: composer require laravel/cashier Publikasikan dan Jalankan Migrations: php artisan vendor:publish --tag="cashier-migrations" php artisan migrate Mengonfigurasi Stripe API: Di dalam file .env, tambahkan kunci API Stripe Anda: STRIPE_KEY=your-stripe-key STRIPE_SECRET=your-stripe-secret Membuat Langganan: $user = User::find(1); $user->newSubscription('default', 'price_monthly')->create($paymentMethod); Dengan Laravel Cashier, Anda dapat dengan mudah menambahkan fitur pembayaran langganan ke dalam aplikasi Anda, menghemat waktu dan usaha dalam mengelola proses pembayaran. Ringkasan Dalam dunia pengembangan web, efisiensi adalah salah satu faktor penentu keberhasilan proyek. Laravel, dengan ekosistem package dan library yang sangat luas, menjadi pilihan utama bagi banyak developer karena menyediakan alat-alat yang dirancang untuk mempercepat proses pengembangan tanpa harus mengorbankan kualitas. Setiap library yang tersedia di Laravel memiliki perannya masing-masing dalam menyederhanakan dan mempercepat berbagai aspek pengembangan. Spatie adalah solusi yang efektif untuk manajemen role dan permission, memungkinkan developer untuk mengelola hak akses pengguna dengan mudah dan aman.Laravel Breeze memberikan fondasi yang kuat untuk otentikasi dasar, mempermudah developer dalam membangun sistem login, registrasi, dan manajemen akun dengan cepat.Laravel Telescope berfungsi sebagai alat monitoring dan debugging yang esensial, memberikan wawasan mendalam tentang aktivitas aplikasi dan membantu dalam proses pengoptimalan dan pemecahan masalah.Filament menawarkan cara cepat dan fleksibel untuk membangun panel administrasi yang modern, lengkap dengan operasi CRUD yang mudah digunakan dan disesuaikan.Laravel Cashier menyederhanakan integrasi sistem pembayaran berlangganan dengan Stripe dan Paddle, memudahkan manajemen langganan, pembayaran, dan dukungan multicurrency. Dengan memanfaatkan library-library ini, developer dapat mempercepat proses pengembangan, meningkatkan produktivitas, dan fokus pada pengembangan fitur-fitur yang lebih kompleks dan inovatif. Untuk programmer website pemula, mempelajari dan menguasai penggunaan library ini bisa menjadi langkah penting dalam mengembangkan skill dan meningkatkan efisiensi kerja. Belajar lebih dalam tentang Laravel dan library-library ini bersama mentor di buildwithangga.com dapat memberikan banyak manfaat, seperti akses seumur hidup ke materi, konsultasi dengan mentor, grup diskusi dengan sesama student, serta persiapan kerja yang lebih matang. Semua ini akan membantu Anda menjadi developer yang lebih produktif dan siap bersaing di industri.

Hello designers! Ketika bekerja sebagai UI/UX designer kita bisa tidak melulu terpaku pada gaji bulanan. Ada banyak peluang lain untuk mendapatkan penghasilan tambahan, bahkan bisa menjadi sumber pendapatan utama. Artikel kali ini kita akan membahas berbagai cara yang bisa dilakukan UI/UX designer untuk meningkatkan penghasilan mereka, seperti: Menjual aset digital: UI/UX designer memiliki keahlian yang berharga dalam menciptakan desain yang menarik, berkualitas dan fungsional. Keahlian ini dapat dimanfaatkan untuk membuat dan menjual aset digital seperti template UI, UI Kit, dan icon pack 🥰Menjadi freelancer: UI/UX designer yang ingin bekerja secara mandiri, freelancing adalah pilihan yang tepat.Banyak platform menawarkan berbagai project UI/UX dengan berbagai tingkatan budget dan skillset. Jadi freelancer enak loh! Kamu bisa memilih project yang sesuai dengan minat dan mengatur jam kerja sendiri!Mengajar online: Bagi UI/UX designer yang ingin berbagi ilmu dan pengalaman mereka, mengajar online bisa menjadi pilihan yang menarik. Mengajar online tidak hanya memberikan penghasilan tambahan, tetapi juga membantu designer untuk membangun reputasi dan kredibilitas mereka dalam industri.Menulis artikel atau buku: Sebagai UI/UX designer yang memiliki banyak pengetahuan dan wawasan tentang desain yang dapat dibagikan dengan orang lain, menulis artikel, atau publikasi online seperti buku bisa menjadi langkah yang bagus untuk mendapatkan audiens yang lebih luas dan membangun brand awareness. Menjadi UI/UX designer memanh membuka banyak peluang untuk mendapatkan penghasilan tambahan atau side income dan improve karir. Dengan memanfaatkan berbagai platform dan peluang yang tersedia, kalian UI/UX designer dapat mencapai kesuksesan finansial dan profesional yang lebih tinggi lagi loh! Berikut hal-hal apa saja yang dapat kamu lakukan untuk mendapatkan side income tambahan! 1. Jualan Template UI 🤑 Kamu bisa menjual template UI *design-*mu loh! Banyak perusahaan yang membutuhkan template UI untuk perusahaan mereka. Berikut tempat kamu bisa jualan template UI: ThemeForest: ThemeForest adalah salah satu platform terbesar untuk menjual template web. Platform ini memiliki banyak pembeli potensial karena trafiknya yang tinggi. Di sini, persaingannnya pun cukup ketat karena banyaknya penjual lain di platform ini. Kelebihan: Jangkauan luas, peluang penjualan tinggi.Kekurangan: Persaingan ketat, komisi platform tinggi (hingga 35%).Creative Market: Platform ini merupakan pasar online populer untuk berbagai aset kreatif termasuk template UI juga loh! Creative Market memiliki komunuitas kreatif yang aktif serta ini platform yang ramah pengguna dengan proses upload dan penjualan yang mudah. Kelebihan:Platform user-friendly, komunitas kreatif aktif.Kategorisasi yang Baik: Produkmu akan lebih mudah ditemukan oleh pembeli potensial karena kategorisasi yang jelas dan detail.Sistem Pembayaran yang Terpercaya: Sistem pembayaran di ThemeForest sudah sangat terpercaya dan memudahkan transaksi.Kekurangan:Persentase Royalti yang Relatif Kecil: Setelah dipotong berbagai biaya, persentase royalti yang kamu dapatkan mungkin tidak terlalu besar. Persaingan cukup ketat, komisi platform (hingga 40%).Kompetisi Tinggi: Karena banyaknya penjual, kamu harus bersaing ketat untuk menarik perhatian pembeli.UI8: Platform ini khusus untuk menjual template UI dan UX ya guys. UI8 memiliki target audiens yang spesifik yaitu para designer. UI8 juga memiliki komunitas yang fokus pada UI/UX design. Kelebihan:Target audiens spesifik, komunitas designer terhubung.Niche Market: UI8 lebih fokus pada desain UI/UX, sehingga produkmu akan lebih relevan dengan target audiens yang tepat.Kualitas Produk yang Konsisten: UI8 sangat selektif dalam memilih produk yang akan dijual, sehingga kualitas produk secara keseluruhan sangat baik.Kekurangan:Jangkauan Pasar Paling Kecil: Dibandingkan dua platform lainnya, jangkauan pasar UI8 adalah yang paling kecil. 2. Jualan UI Kit! Menjual UI Kit juga dapat menjadi cara yang menguntungkan bagi UI/UX designer untuk menambah penghasilan, membangun portofolio, dan membagikan keahlian. Berikut beberapa platform yang menjadi pasar untuk jualan UI Kit: Gumroad: Gumroad merupakan platform populer yang menjual produk digital juga dengan sistem “pay what you want”. Gumroad memberikan fleksibilitas bagi pembeli untuk menentukan hargam yang ingin dibayar. Sangat cocok untuk menjual produk niche atau yang masih dalam tahap pengembangan. Kelebihan:"pay what you want", fleksibilitas harga.Biaya Transaksi Rendah: Gumroad menawarkan biaya transaksi yang relatif rendah.Fleksibilitas: Kamu memiliki kendali penuh atas harga, distribusi, dan pemasaran produkmu.Kekurangan:Penghasilan tidak pasti karena pembeli menentukan harga sendiri.Tidak Ada Fitur Marketplace: Gumroad lebih seperti platform penjualan langsung, sehingga kamu harus melakukan pemasaran sendiri untuk mencapai pembeli.Etsy: Etsy merupakan pasar online untuk produk buatan tangan yang vintage di mana kamu juga bisa menjal UI Kit. Ia memiliki basis pembeli yang unik dan kreatif. Sangat cocok untuk menjual UI Kit dengan desain yang unik dan menarik! 🤩 Kelebihan:Basis pembelinya unik, cocok untuk desain UI kit yang unik juga.Fokus pada Produk Digital: Etsy semakin fokus pada produk digital, sehingga persaingan untuk UI Kit mungkin tidak sebesar platform lain.Kekurangan:Persaingan dengan produk handmade lainnya, target audiens lebih spesifik.Biaya Transaksi: Biaya transaksi di Etsy bisa lebih tinggi dibandingkan platform lain.Envato Elements: Envato memberikan layanan berlangganan yang menawarkan akses ke berbagai aset kreatif termasuk UI Kit. Ia memiliki basis pelanggan yang besar dan berkelanjutan dengan penghasilan yang stabil dan terprediksi. Kelebihan:Penghasilan stabil, jangkauan luas.Marketplace Besar: Envato Elements memiliki jutaan pelanggan, sehingga potensi penjualanmu sangat besar.Kekurangan:Penghasilan per item lebih kecil, komisi platform tinggi (hingga 30%).Persaingan Tinggi: Karena jumlah penjual yang banyak, persaingan untuk mendapatkan perhatian pembeli sangat ketat. 3. Yuk Coba Freelancing! 🤩 Bekerja sebagai UI/UX designer tidak hanya terbatas pada pekerjaan kantoran dengan gaji bulanan. Freelancing menawarkan banyak peluang menarik bagi para UI/UX designer untuk meningkatkan penghasilan, memperluas pengalaman, dan mengembangkan karir mereka. Upwork: Upwork merupakan platform freelance terbesar di dunia untuk saat ini dengan berbagai macam project UI/UX. Banyak proyek terdedia dengan berbagai tingkatan budget dan skillset-nya. Di sini, persaingan cukup ketat karena banyaknya freelancer di platform ini. Kelebihan:Cukup banyak proyek tersedia dan peluang kerja tinggi.Marketplace Terbesar: Upwork adalah salah satu marketplace freelance terbesar, memberikan akses ke banyak proyek dan klien.Sistem Escrow: Sistem escrow memberikan keamanan bagi kedua belah pihak.Kekurangan:Persaingan ketat, perlu bersaing dengan freelancer lain untuk mendapatkan proyek.Sistem Escrow: Sistem escrow memberikan keamanan bagi kedua belah pihak.Fiverr: Fiverr adalah platform freelance yang menawarkan project UI/UX dengan harga yang sudah ditentukan. Sangat cocok untuk freelancer yang ingin menawarkan jasa dengan harga yang pasti dan juga user-friendly dengan proses pencarian project yang mudah. Kelebihan:Harga yang pasti/tetap untuk setiap proyek, mudah dicari klien.Gig yang Beragam: Fiverr menawarkan berbagai jenis gig, mulai dari desain grafis hingga penulisan.Harga yang Relatif Terjangkau: Fiverr dikenal dengan harga gig yang relatif terjangkau.Kekurangan:Penghasilan per proyek lebih kecil, komisi platform tinggi (hingga 20%).Tidak semua proyek di Fiverr memiliki kualitas yang baik.Fokus pada Gig Kecil: Fiverr lebih cocok untuk proyek-proyek kecil, jika kamu mencari proyek jangka panjang dengan nilai yang lebih besar, mungkin perlu mencari platform lain.Toptal: Toptal merupakan tempat freelance yang menghubungkan desainer expert dengan berbagai projects high-end. Desainer harus melalui proses seleksi yang ketat untuk memastikan kualitas freelancer. Walaupun begitu, penghasilannya tinggi untuk proyek-proyek high-end. Kelebihan:Penghasilan tinggi, proyek berkualitas.Bayaran Tinggi: Bayaran di Toptal umumnya lebih tinggi dibandingkan platform lain.Kekurangan:Proses seleksi ketat, persaingan dengan freelancer top lainnya.Proyek yang Terbatas: Jumlah proyek di Toptal mungkin tidak sebanyak di Upwork atau Fiverr. 4. Mengajar Online! Sebagai seorang UI/UX berpengalaman, kamu bisa juga loh membagikan ilmu yang kamu punya sebagai mentor/tutor yang membuka kelas tentang UI/UX! Berikut platform untuk mengajar online: BuildWithAngga: BuildWithAngga (BWA) adalah platform edukasi online yang berfokus pada pengembangan skill UI/UX Design, programming, dan bisnis. Kamu bisa membuka kelas di sini sebagai Mentor Kelas UI/UX dan menjual kelasmu. Bangun personal branding dan masuk ke komunitas yang luas. Kelebihan:BWA memiliki komunitas online yang besar dan aktif dengan lebih dari 200.000 anggota. Hal ini memungkinkan pengajar untuk menjangkau audiens yang luas dan mendapatkan banyak peserta kursus.Platform ini seringkali fokus pada tutorial mendalam dan berkualitas tinggi, terutama terkait pengembangan web. Ini memungkinkan pengajar untuk membangun reputasi yang kuat di bidang yang spesifik.Komunitas yang Solid: BuildWithAngga memiliki komunitas yang cukup aktif, memungkinkan pengajar untuk berinteraksi langsung dengan peserta didik, memberikan dukungan, dan mendapatkan umpan balik.Udemy: Udemy adalah platform online learning populer di mana kamu bisa membuat dan menjual kursus UI/UX juga. Ia memiliki banyak pengguna dan mudah untuk mempromosikan kursusmu. Meskipun begitu, persaingan cukup ketat karena banyak instruktur di sini. Kelebihan:Jangkauan Pasar yang Luas: Udemy memiliki basis pengguna yang sangat besar dari berbagai belahan dunia, sehingga peluang untuk menjangkau audiens yang lebih luas sangat tinggi.Promosi yang Efektif: Udemy seringkali mengadakan promosi dan diskon, yang dapat membantu meningkatkan penjualan kursus.Skillshare: Skillshare menawarkan berbagai macam kursus kreatif termasuk UI/UX dan memiliki komuntias aktif dan terhubung. User-friendly dengan proses pembuatan dan publikasi kursus yang terbilang mudah. Kelebihan: Komunitas yang aktif, platform user-friendly.Fokus pada Kreativitas: Skillshare lebih fokus pada kursus-kursus kreatif seperti desain, fotografi, dan penulisan. Jika kontenmu sesuai dengan niche ini, Skillshare bisa menjadi pilihan yang tepat.Model Berlangganan: Model berlangganan Skillshare memungkinkan pengajar untuk mendapatkan penghasilan yang stabil setiap bulan, meskipun persentase yang didapatkan mungkin lebih kecil dibandingkan dengan platform lain. 5. Menulis Artikel atau Buku 📚 Menulis artikel dan buku dapat menjadi cara yang juga bagus bagi UI/UX designer untuk membagikan pengetahuan dan pengalaman mereka, membangun kredibilitas, dan menjangkau audiens yang lebih luas. Berikut beberapa platform yang dapat digunakan oleh UI/UX designer untuk menulis artikel dan buku, beserta kelebihan dan kekurangannya: Medium: Medium merupakan platform blogging populer yang memungkinkan kamu untuk menulis dan menerbitkan artikel dengan mudah. Platform ini memiliki komunitas pembaca yang besar dan aktif yang tertarik dengan berbagai topik, termasuk desain UX. Kelebihan: Memiliki komunitas dan jangkauan luas. Berpotensi untuk dilirik oleh audiens yang lebih luas serta mudah digunakan.Kekurangan: Kontrol yang terbatas untuk penulis dan lebih sedikit konten atas desain artikel mereka di Medium dibanding dengan blog pribadi. Algoritma Medium juga tidak terlalu bagus sehingga memengaruhi visibilitas artikel dan potensi penghasilan.UX Collective: UX Collective merupakan publikasi artikel online yang memiliki fokus pada desain UX. Situs ini menawarkan berbagai artikel, cerita, dan sumber daya tentang berbagai topik desain UX, termasuk penelitian pengguna, desain antarmuka pengguna, dan desain sistem informasi. Kelebihan: Memiliki komunitas desain UX yang aktif dan juga dapat memberikan feedback dan dukungan ke penulis. Berfokus pada desain UX sehingga artikel lebih relevan untuk target audience.Kekurangan: Memiliki audiens yang lebih kecil dibanding Medium dan CSS-Tricks. Persaingannya pun juga ketat dan agak susah untuk mendapatkan perhatian pembaca. Kesimpulan 💬 UI/UX designer memiliki banyak peluang untuk meningkatkan penghasilan mereka di luar pekerjaan kantoran tradisional. Dalam artikel ini kita telah membahas 5 cara utama untuk mendapatkan penghasilan tambahan, yaitu: Membangun Template UI dan UI Kit: Kamu dapat menjual template UI dan UI kit yang dibuat secara online.Meningkatkan Produktivitas Freelancing: Tpols AI dapat membantu designer menyelesaikan proyek freelancing dengan lebih cepat dan akurat.Menulis Artikel dan Blog yang Informatif: Kamu dapat menulis artikel dan blog tentang desain UX dan mempublikasikannya di platform online..Mengajar Online: Designer dapat mengajar online di platform seperti BuildWithAngga. Setiap cara memiliki kelebihan dan kekurangannya sendiri. Kamu sebagai desainer perlu memilih cara yang paling sesuai dengan keahlian, minat, dan sumber dayamu. Dengan memanfaatkan peluang ini, UI/UX designer dapat meningkatkan penghasilan mereka dan mencapai stabilitas keuangan yang lebih baik 🤑 AI Mendorong Side Income UI/UX Designer? 🤔 Pada era digital ini, AI (Artificial Intelligence) bukan hanya membantu perusahaan besar, tetapi juga menawarkan peluang baru bagi para UI/UX designer untuk meningkatkan penghasilan mereka! Nah, berikut beberapa cara AI dapat membantu UI/UX designer mendapatkan side income tambahan: Freelancing Platforms with AI MatchingMenggunakan platform freelance yang menggunakan AI untuk mencocokkan desainer dengan proyek yang sesuai berdasarkan keahlian, portofolio, dan preferensi. AI dapat mengidentifikasi *project-*mu yang sesuai dengan keahlian dan minat, meningkatkan peluang diterima. Serta, mengurangi waktu yang dihabiskan untuk mencari project secara manual 🤩AI Design ToolsKamu bisa menggunakan alat desain berbasis AI yang dapat mempercepat proses desainmu, seperti tools untuk pembuatan wireframe, mockup, atau desain visual otomatis. Dengan AI kamu bisa mengotomatiskan task berulang dan mempercepat proses desain.Selling AI-Generated Design AssetsDesainer dapat membuat dan menjual aset desain yang dihasilkan oleh AI, seperti template UI, ikon, atau ilustrasi. Sekali dibuat dan diperjual-belikan, aset tersebut dapat dijual berulang kali tanpa perlu modifikasi lagi.Menganalisis Data Pengguna dan Meningkatkan DesainAI bisa membantu UI/UX designer dalam menganalisis data user dan meningkatkan desain mereka. Tools seperti Google Analytics dan Hotjar dapat membantu designer dalam memahami perilaku pengguna dan mengidentifikasi area-area yang perlu diperbaiki dalam desain.Tools seperti AI-powered testing platforms dapat membantu designer dalam melakukan A/B testing dan mengoptimalkan desain kalian untuk meningkatkan konversi dan engagement.Offering AI Consulting ServicesKamu juga bisa menawarkan layanan konsultasi untuk implementasi AI dalam proses desain atau user experience. Kamu bisa menawarkan layanan dengan nilai tambah yang tinggi dan saat ini banyak perusahaan yang mencari cara untuk mengintegrasikan AI dalam produk dan layanan mereka. AI mampu loh menawarkan banyak peluang bagi UI/UX designer untuk memperoleh side income, namun juga membawa tantangan tersendiri. Penting untuk menimbang kelebihan dan kekurangan serta terus mengembangkan skill untuk tetap relevan dalam industri yang berkembang pesat ini 🤯 Tertarik belajar UI/UX lebih dalam? Yuk gabung ke kelas-kelas gratis UI/UX BuildWithAngga dan asah *skill-*mu untuk menjadi seorang desainer profesional 🥰

Dunia aplikasi mobile lagi berubah super cepat, dan tahun 2024 ini jadi momen penting buat desain UI/UX. Teknologi yang makin canggih bakal bawa desain aplikasi ke level baru yang seru banget. Di artikel kali ini, kita bakal ngebahas 5 tren desain UI/UX buat aplikasi mobile yang diprediksi bakal jadi raja pasar tahun 2024. Dengan manfaatin teknologi terbaru dan fokus banget ke pengguna, para desainer dan developer bisa bikin aplikasi yang asyik dan bikin ketagihan. 1. Simplicity UI Design by ShaynaKIT Desain aplikasi di ponsel udah lama banget pakai konsep minimalis. Intinya, simpel, jelas, dan gampang dipake. Dengan buang yang nggak penting-penting, desainer bisa bikin tampilan yang fokus ke hal-hal utama. Jadinya, kamu bakal lebih enak pakai aplikasi karena navigasinya gampang dimengerti. Rahasia minimalis itu pakai spasi kosong dengan cerdas, tata letak yang seimbang, dan warna yang sedikit tapi pas buat nunjukin bagian penting. Hasilnya, aplikasi jadi lebih enak dilihat dan dipake. Oke, mari kita bahas lebih dalam tentang keunggulan desain minimalis atau simplicity ini: Keunggulan Desain Simplicity: Mudah Digunakan: Desain yang simpel membuat pengguna lebih cepat paham dan bisa langsung menggunakan aplikasi tanpa perlu banyak belajar. Ini meningkatkan kepuasan pengguna.Fokus pada Inti: Dengan menghilangkan elemen yang tidak perlu, desain minimalis membuat pengguna lebih fokus pada fitur utama aplikasi. Ini membantu pengguna mencapai tujuannya dengan lebih efisien.Tampilan yang Menarik: Desain yang bersih dan sederhana justru bisa terlihat lebih menarik dan modern. Ini membuat pengguna lebih betah menggunakan aplikasi.Performa Lebih Baik: Desain minimalis biasanya membuat aplikasi berjalan lebih lancar karena mengurangi beban pada perangkat. Ini penting terutama untuk perangkat dengan spesifikasi yang terbatas.Aksesibilitas Tinggi: Desain minimalis cenderung lebih mudah diakses oleh pengguna dengan disabilitas, seperti pengguna tunanetra atau pengguna dengan keterbatasan motorik.Fleksibel: Desain minimalis mudah disesuaikan dengan berbagai ukuran layar dan platform. Ini membuat aplikasi bisa digunakan di berbagai perangkat.Pengalaman Pengguna yang Konsisten: Desain minimalis membantu menciptakan pengalaman pengguna yang konsisten di seluruh aplikasi. Ini membuat pengguna merasa lebih nyaman dan familiar. 2. Advanced Personalization Bayangin gini, aplikasi sekarang bisa jadi sahabat yang paham banget sama kamu. Dia belajar dari kebiasaan, suka-suka, dan data diri kamu buat kasih rekomendasi, info, dan tawaran yang pas banget. Jadi, kamu nggak bakal dikasih hal-hal yang nggak kamu suka. Ini keren banget karena aplikasi bisa berubah-ubah sesuai situasi, kayak lagi pagi, siang, atau malem, bahkan di mana kamu lagi ada. Pokoknya, kamu bakal seneng banget pakai aplikasi karena dia kayak tau aja apa yang kamu butuhin! Gimana, keren kan? 😄 Keunggulannya antara lain: Pengalaman Pengguna yang Lebih Personal: Rekomendasi yang Tepat: Aplikasi bisa menyajikan rekomendasi produk, konten, atau fitur yang sesuai dengan minat dan preferensi pribadi pengguna. Misalnya, aplikasi musik bisa merekomendasikan lagu baru yang mirip dengan lagu favorit pengguna.Konten yang Relevan: Aplikasi bisa menyesuaikan tampilan konten berdasarkan riwayat pencarian dan aktivitas pengguna. Misalnya, aplikasi berita bisa menampilkan berita yang relevan dengan topik yang sering dibaca pengguna. Peningkatan Keterlibatan Pengguna: Pengalaman yang Lebih Menarik: Pengalaman yang dipersonalisasi membuat pengguna merasa lebih diperhatikan dan dihargai. Ini meningkatkan keinginan pengguna untuk terus menggunakan aplikasi.Tingkat Keterlibatan yang Lebih Tinggi: Ketika pengguna menemukan konten yang relevan, mereka cenderung menghabiskan lebih banyak waktu di dalam aplikasi. Pemahaman yang Lebih Baik tentang Pengguna: Data yang Berharga: Dengan mengumpulkan dan menganalisis data pengguna, perusahaan bisa mendapatkan pemahaman yang lebih baik tentang perilaku dan preferensi pelanggan.Pengembangan Produk yang Lebih Baik: Data ini bisa digunakan untuk mengembangkan fitur dan produk baru yang lebih sesuai dengan kebutuhan pengguna. 3. Dark Mode Dark mode lagi hits banget sekarang, soalnya keren dan juga punya banyak manfaat. Ganti warna jadi gelap itu bisa bikin mata kamu nggak capek kalau lagi di tempat yang gelap, jadi lebih enak baca, dan baterai ponsel kamu yang pake layar AMOLED atau OLED bisa lebih awet. Nyalain dark mode itu kayak nonton film di bioskop, nyaman banget, apalagi kalau kamu punya masalah sama mata atau sensitif cahaya. Terus, tampilannya juga kece, bikin video sama foto jadi makin keren 🥰 Keunggulan Dark Mode Menjaga Kesehatan Mata: Mengurangi Kelelahan Mata: Saat kita menatap layar dengan latar belakang putih terang dalam kondisi cahaya redup, mata kita bekerja lebih keras untuk menyesuaikan diri. Dark mode dengan latar belakang gelap membantu mengurangi kontras yang tajam, sehingga mata tidak cepat lelah.Meminimalisir Paparan Cahaya Biru: Cahaya biru yang dipancarkan layar dapat mengganggu pola tidur jika kita menggunakan perangkat elektronik sebelum tidur. Dark mode dapat mengurangi emisi cahaya biru, sehingga lebih ramah bagi mata dan membantu kita tidur lebih nyenyak.Membantu Pengguna dengan Gangguan Mata: Bagi pengguna dengan kondisi mata tertentu seperti astigmatisma atau sensitivitas cahaya, dark mode dapat memberikan kenyamanan yang lebih baik saat menggunakan perangkat. 4. Augmented Reality vs Virtual Reality Image by Freepik AR sama VR tuh teknologi keren banget yang lagi mengubah gimana kita pakai aplikasi dan main game. AR kayak nambahin hal-hal virtual ke dunia nyata, jadi seru banget. Misalnya, coba bayangin kamu lagi jalan-jalan, terus ada karakter game muncul di depan mata! Sedangkan VR itu kayak masuk ke dunia lain yang sepenuhnya buatan, bisa jadi pengalaman yang seru banget. Teknologi ini bikin cerita jadi lebih menarik dan interaktif, makanya para desainer harus pinter-pinter bikin dunia virtual yang asyik. AR sama VR kan terus berkembang, jadi pasti bakal ada banyak ide-ide keren buat bikin aplikasi dan game yang makin seru! 🤩 Illustration by Freepik Oh iya, Augmented Reality adalah teknologi yang menggabungkan dunia nyata dengan elemen digital secara real-time. Bayangkan kamu sedang melihat dunia melalui layar ponsel, lalu muncul objek 3D di atas benda-benda nyata di sekitarmu. Itulah yang disebut AR. Contoh: Aplikasi filter di Instagram atau Snapchat yang bisa mengubah wajahmu menjadi hewan atau menambahkan efek-efek lucu adalah contoh sederhana dari AR. Game Pokemon Go juga merupakan contoh populer AR, di mana kamu bisa menangkap Pokemon yang muncul di dunia nyata melalui layar ponselmu. Illustration by Freepik Sedangkan Visual Reality adalah teknologi yang menciptakan lingkungan simulasi yang sepenuhnya digital. Ketika menggunakan VR, kamu akan merasa seolah-olah benar-benar berada di dunia yang berbeda. Contoh: Permainan VR yang menggunakan headset VR akan membuatmu merasa seperti berada di dalam game tersebut. Kamu bisa melihat ke segala arah, berinteraksi dengan objek virtual, dan bahkan merasakan sensasi seperti berjalan atau memegang benda. Keunggulannya antara lain: Pengalaman yang Lebih Imersif dan Menarik: Dunia Maya yang Nyata: VR memungkinkan pengguna untuk benar-benar merasakan seolah-olah mereka berada di dunia yang berbeda. Bayangkan kamu bisa menjelajahi kota-kota kuno, mendaki gunung tertinggi, atau bahkan menyelam ke dasar laut, semua dari kenyamanan rumahmu.Interaksi yang Lebih Realistis: AR membawa elemen virtual ke dunia nyata, membuat interaksi dengan objek digital menjadi lebih alami. Misalnya, kamu bisa mencoba pakaian secara virtual sebelum membelinya atau merakit furnitur dengan panduan AR. Potensi Besar di Berbagai Industri: Pendidikan: AR dan VR bisa membuat pembelajaran jadi lebih menyenangkan dan efektif. Misalnya, siswa bisa melakukan eksperimen sains secara virtual atau menjelajahi planet-planet dalam tata surya.Kesehatan: Teknologi ini bisa digunakan untuk pelatihan medis, terapi fobia, dan rehabilitasi. Dokter bedah bisa berlatih operasi menggunakan simulator VR, sementara pasien dengan fobia ketinggian bisa menjalani terapi eksposur virtual.Permainan: Game dengan teknologi AR dan VR menawarkan pengalaman bermain yang jauh lebih imersif dan interaktif. Kamu bisa merasakan sensasi menjadi seorang pahlawan super atau menjelajahi dunia fantasi yang luas. 5. User-generated Design Illustration by Freepik User-generated design itu kayak ngajak pengguna buat ikutan bikin desain. Desainer kerja bareng sama pengguna buat bikin barang-barang digital yang keren. Caranya, ajak pengguna buat ikut nimbrung lewat platform terbuka atau semacamnya. Nanti, desainer bisa dapet banyak ide, masukan, dan saran yang berguna buat bikin desain yang makin oke. Ini kayak nyerahin otak kolektif semua orang buat bikin desain yang lebih simpel dan gampang dipake. Jadinya, pengguna bakal merasa punya andil dan makin sayang sama produknya. Selain bikin desain makin bagus, cara ini juga bisa bikin inovasi makin jalan dan pengguna makin puas! Keunggulan User-generated Design Desain yang Lebih Sesuai dengan Kebutuhan Pengguna: Pemahaman Mendalam: Dengan melibatkan pengguna secara langsung, desainer bisa mendapatkan pemahaman yang lebih mendalam tentang apa yang sebenarnya dibutuhkan dan diinginkan oleh pengguna. Ini karena pengguna sendiri yang memberikan masukan dan saran berdasarkan pengalaman mereka.Solusi yang Lebih Tepat: Hasilnya, desain yang dihasilkan akan lebih relevan dan sesuai dengan kebutuhan pengguna. Fitur-fitur yang ada akan lebih berguna dan mudah digunakan. Meningkatkan Keterlibatan dan Loyalitas Pengguna: Perasaan Memiliki: Ketika pengguna merasa terlibat dalam proses pembuatan produk, mereka akan merasa memiliki produk tersebut. Hal ini akan meningkatkan rasa loyalitas mereka terhadap produk atau merek.Komunitas yang Kuat: Proses kolaborasi dalam desain ini juga bisa membangun komunitas yang kuat di sekitar produk. Pengguna akan merasa lebih terhubung satu sama lain dan dengan produk itu sendiri 🤩 Meningkatkan Inovasi: Ide-ide Baru: Dengan melibatkan banyak orang, akan muncul banyak ide-ide baru dan kreatif yang mungkin tidak terpikirkan oleh desainer sendiri.Solusi yang Tidak Terduga: Pengguna seringkali memiliki perspektif yang berbeda dari desainer, sehingga mereka bisa memberikan solusi yang inovatif dan tidak terduga untuk masalah yang ada. Kesimpulan 💬 Dengan memantau tren terkini dan melibatkan pengguna secara aktif dalam proses desain, kita tidak hanya sekadar mendapatkan desain yang lebih baik, tetapi juga membangun hubungan yang lebih mendalam dan bermakna dengan pengguna. Ketika pengguna merasa dilibatkan dalam menciptakan produk yang mereka gunakan sehari-hari, mereka akan merasa lebih dihargai dan memiliki rasa memiliki yang kuat terhadap produk tersebut. Hal ini melampaui sekadar kepuasan semata; pengguna akan menjadi bagian dari komunitas yang lebih luas di sekitar produk tersebut, saling berbagi pengalaman dan memberikan masukan. Hubungan yang kuat ini tidak hanya meningkatkan loyalitas pengguna, tetapi juga mendorong mereka untuk menjadi advokat merek. Pengguna yang merasa puas dan terhubung dengan produk akan lebih cenderung merekomendasikan produk tersebut kepada orang lain, sehingga secara tidak langsung membantu meningkatkan visibilitas dan reputasi merek. Selain itu, dengan melibatkan pengguna, perusahaan juga mendapatkan wawasan yang berharga tentang kebutuhan dan keinginan pengguna yang terus berkembang, sehingga memungkinkan perusahaan untuk lebih adaptif dan inovatif dalam merespon perubahan pasar. Bingung mau belajar UI/UX di mana dan cari kelas yang aman di kantong? Kamu bisa ikuti kelas-kelas UI/UX gratis dan berbayar di BuildWithAngga loh! Selain mengasah skill, kamu juga bisa menciptakan portofolio yang berkualitas dan dijamin dilirik client!

Laravel telah menjadi salah satu framework paling populer di kalangan developer web di seluruh dunia. Dengan fitur-fitur canggih yang ditawarkan, Laravel membuat pekerjaan developer menjadi lebih mudah dan efisien. Dalam artikel ini, kita akan membahas tujuh tutorial dasar yang wajib diketahui oleh setiap developer yang ingin menguasai Laravel. Artikel ini akan dibagi menjadi beberapa bagian untuk memudahkan pemahaman dan penerapan secara praktis. Mengapa Laravel Menjadi Framework yang Populer? Laravel tidak hanya populer karena kemampuannya, tetapi juga karena filosofi yang diusungnya. Laravel mengutamakan elegance, simplicity, dan readability dalam pengembangan aplikasi web. Beberapa fitur canggih yang menjadikan Laravel sebagai framework pilihan banyak developer adalah: Routing yang Fleksibel: Laravel menyediakan cara yang sangat mudah dan fleksibel untuk mengelola route dalam aplikasi Anda.Blade Templating Engine: Blade adalah template engine yang kuat, memungkinkan developer untuk menulis kode yang lebih bersih dan mudah dibaca.Artisan Command-Line Interface (CLI): Dengan Artisan, developer dapat menjalankan berbagai perintah untuk mengotomatisasi tugas-tugas yang berulang seperti membuat model, controller, atau migration.Eloquent ORM: Laravel dilengkapi dengan Object-Relational Mapping (ORM) yang sangat mudah digunakan untuk berinteraksi dengan database. Fitur-Fitur yang Membantu Developer Laravel tidak hanya membantu dalam pengembangan, tetapi juga dalam kolaborasi antar developer. Dengan Laravel, implementasi Service Repository Pattern menjadi lebih mudah. Pola ini memungkinkan pemisahan logika bisnis dari lapisan data, sehingga kode menjadi lebih terstruktur dan mudah dikelola. Beberapa manfaat dari Service Repository Pattern adalah: Keterbacaan Kode yang Lebih Baik: Memisahkan logika bisnis dari akses data membuat kode lebih mudah dibaca dan dipahami oleh tim.Peningkatan Testabilitas: Dengan logika bisnis yang terpisah dari data, unit testing menjadi lebih mudah dilakukan.Kemudahan Refactoring: Jika ada perubahan pada logika bisnis atau akses data, refactoring dapat dilakukan tanpa mengganggu bagian lain dari kode. Mengatur Database Connection di Laravel Setelah Anda menginstal Laravel, langkah pertama yang harus dilakukan adalah mengatur koneksi ke database. Laravel menggunakan file .env untuk menyimpan informasi konfigurasi, termasuk koneksi database. Berikut adalah langkah-langkahnya: 1)Buka File .env: File ini terletak di root direktori proyek Laravel Anda. 2)Cari Bagian DB_CONNECTION: Pada bagian ini, Anda dapat mengatur jenis database yang akan digunakan, seperti MySQL, PostgreSQL, SQLite, atau SQL Server. 3) Atur DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD: Masukkan informasi yang sesuai dengan konfigurasi database Anda. Misalnya, jika Anda menggunakan MySQL, isian dapat seperti berikut: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=root DB_PASSWORD=password 4) Simpan Perubahan: Setelah semua informasi diisi, simpan file .env Anda. Mengapa Ini Penting? Mengatur koneksi database dengan benar sangat penting karena setiap aplikasi web biasanya membutuhkan penyimpanan data yang efisien dan aman. Laravel mempermudah proses ini dengan konfigurasi yang sederhana dan jelas. Instalasi Laravel Menggunakan Composer Langkah pertama dalam menggunakan Laravel adalah menginstalnya di sistem Anda. Laravel dapat diinstal menggunakan Composer, yang merupakan dependency manager untuk PHP. Berikut adalah langkah-langkah instalasi Laravel: 1) Pastikan Composer Terinstal: Jika Anda belum memiliki Composer, unduh dan instal Composer dari https://getcomposer.org/. 2) Jalankan Perintah Instalasi Laravel: Buka terminal atau command prompt, lalu jalankan perintah berikut untuk menginstal Laravel: composer create-project --prefer-dist laravel/laravel nama-proyek-anda 3) Masuk ke Direktori Proyek: Setelah instalasi selesai, masuk ke direktori proyek dengan perintah: cd nama-proyek-anda 4) Jalankan Server Development: Untuk memeriksa apakah instalasi berhasil, jalankan server development dengan perintah: php artisan serve 5) Akses Aplikasi di Browser: Buka browser dan akses http://localhost:8000. Jika Anda melihat halaman default Laravel, itu berarti instalasi berhasil. Keuntungan Menggunakan Composer Dengan Composer, Anda tidak hanya dapat menginstal Laravel, tetapi juga mengelola dependensi lain yang dibutuhkan oleh proyek Anda. Composer memastikan semua dependensi diinstal dan diperbarui dengan benar. Apa Itu Artisan pada Laravel Command? Artisan adalah command-line interface yang disediakan oleh Laravel. Dengan Artisan, Anda dapat menjalankan berbagai perintah yang membantu dalam pengembangan aplikasi, seperti membuat model, controller, dan migration, serta menjalankan task yang berulang. Beberapa perintah Artisan yang sering digunakan adalah: Membuat Model: php artisan make:model NamaModelMembuat Controller: php artisan make:controller NamaControllerMembuat Migration: php artisan make:migration nama_migration Manfaat Menggunakan Artisan Efisiensi: Mengotomatisasi pembuatan file dan proses lain yang berulang.Konsistensi: Membantu menjaga konsistensi dalam penamaan dan struktur file.Pengembangan Lebih Cepat: Menghemat waktu dalam proses pengembangan. Membuat Model dengan Artisan Model di Laravel digunakan untuk berinteraksi dengan tabel database. Untuk membuat model, Anda dapat menggunakan perintah Artisan sebagai berikut: 1)Jalankan Perintah Artisan: Buka terminal dan jalankan perintah: php artisan make:model NamaModel 2) Tambahkan Opsi Jika Diperlukan: Jika Anda ingin sekaligus membuat migration atau controller saat membuat model, Anda bisa menambahkan opsi: php artisan make:model NamaModel -mcr m: Membuat migration.c: Membuat controller.r: Membuat resource controller. 3) Model Dihasilkan di Direktori app/Models: Model yang dihasilkan akan otomatis disimpan di direktori app/Models. Mengapa Model Penting? Model adalah representasi dari tabel database dalam kode PHP. Dengan model, Anda dapat dengan mudah mengelola data dalam database tanpa harus menulis query SQL secara langsung. Membuat Controller dengan Artisan Controller berfungsi sebagai penghubung antara model dan view. Di Laravel, Anda bisa membuat controller dengan sangat mudah menggunakan Artisan: 1) Jalankan Perintah Artisan: Untuk membuat controller, jalankan perintah berikut: php artisan make:controller NamaController 2) Tambahkan Opsi untuk Resource Controller: Jika Anda ingin membuat resource controller (controller dengan metode CRUD default), gunakan perintah: php artisan make:controller NamaController --resource 3) Controller Dihasilkan di Direktori app/Http/Controllers: Controller yang dihasilkan akan disimpan di direktori app/Http/Controllers. Keuntungan Menggunakan Controller Controller memisahkan logika aplikasi dari tampilan, membuat kode lebih terorganisir dan mudah dipelihara. Dengan resource controller, Anda juga dapat mempercepat pembuatan fitur CRUD (Create, Read, Update, Delete). Membuat Migration dengan Artisan Migration adalah cara untuk mengatur struktur database di Laravel. Dengan migration, Anda dapat membuat, mengubah, dan menghapus tabel atau kolom dalam database. Berikut adalah langkah-langkah untuk membuat migration: 1) Jalankan Perintah Artisan: Untuk membuat migration, jalankan perintah berikut: php artisan make:migration nama_migration 2) Edit File Migration: File migration akan tersimpan di direktori database/migrations. Buka file tersebut dan tambahkan definisi tabel atau kolom yang diperlukan. 3) Jalankan Migration: Setelah selesai mengedit, jalankan migration dengan perintah: php artisan migrate Mengapa Migration Penting? Migration memungkinkan developer untuk mengelola versi dari struktur database, memudahkan dalam pengembangan dan kolaborasi antar tim. Dengan migration, Anda juga bisa melacak perubahan apa saja yang telah dilakukan pada database. Menggunakan Artisan untuk Membuat Model, Controller, dan Migration Sekaligus Laravel mempermudah developer untuk membuat model, controller, dan migration sekaligus dengan satu perintah. Ini sangat membantu dalam pengembangan fitur baru yang membutuhkan tabel dan logika baru. Berikut adalah caranya: 1 Jalankan Perintah Artisan: Gunakan perintah berikut untuk membuat model, controller, dan migration sekaligus: php artisan make:model NamaModel -mcr 2 Opsi Lain: Anda juga dapat menggunakan opsi lain seperti -resource untuk membuat resource controller, atau -api untuk membuat controller API. Keuntungan Membuat File Secara Sekaligus Membuat model, controller, dan migration secara sekaligus menghemat waktu dan memastikan bahwa semua file yang diperlukan untuk fitur baru sudah tersedia dan terhubung dengan baik. Menambahkan Route Baru pada web.php Setelah membuat controller, langkah selanjutnya adalah menambahkan route baru di Laravel. Route berfungsi sebagai penentu endpoint URL dan method yang akan dipanggil saat URL tersebut diakses. Berikut adalah caranya: 1 Buka File web.php: File ini terletak di direktori routes/web.php. 2 Tambahkan Route Baru: Misalnya, jika Anda ingin menambahkan route untuk NamaController, tambahkan kode berikut: Route::get('/nama-route', [NamaController::class, 'namaMethod']); 3 Simpan Perubahan: Setelah selesai, simpan file web.php. Tips Tambahan Gunakan route name untuk memudahkan referensi pada route di tempat lain.Gunakan middleware untuk melindungi route yang membutuhkan otentikasi. Tips Penggunaan Laravel Blade Blade adalah template engine yang disediakan oleh Laravel untuk membuat tampilan yang dinamis. Berikut adalah beberapa tips untuk menggunakan Blade dengan lebih efektif: Menggunakan Variable: Untuk menampilkan variable dari controller, gunakan sintaks {{ $variable }}. Conditional: Gunakan @if untuk menambahkan logika kondisi dalam tampilan. Misalnya: @if($user->isAdmin()) <p>Welcome Admin</p> @else <p>Welcome User</p> @endif Looping: Gunakan @foreach untuk melakukan iterasi pada array atau koleksi: @foreach($items as $item) <p>{{ $item->name }}</p> @endforeach Layout dan Section: Gunakan @extends dan @section untuk mengatur layout dan konten halaman. Misalnya: @extends('layouts.app') @section('content') <p>This is my body content.</p> @endsection Mengapa Blade Sangat Bermanfaat? Blade memungkinkan developer untuk membuat tampilan yang dinamis dengan sintaks yang sederhana dan mudah dipahami. Dengan fitur seperti directive, component, dan slot, Blade menjadi alat yang sangat kuat dalam pengembangan frontend di Laravel. Belajar Laravel Lebih Dalam dengan Mentor di BuildWithAngga Belajar Laravel bisa menjadi lebih menyenangkan dan efektif jika Anda memiliki mentor yang tepat. Di BuildWithAngga, Anda dapat belajar Laravel langsung dari para ahli dengan berbagai keuntungan seperti: Akses Seumur Hidup: Setelah membeli kelas, Anda bisa mengaksesnya kapan saja tanpa batasan waktu.Bonus Konsultasi dengan Mentor: Anda bisa berkonsultasi langsung dengan mentor untuk menyelesaikan masalah yang Anda hadapi saat belajar.Grup Diskusi Antar Student: Bergabung dengan komunitas belajar yang aktif, bertukar ide, dan saling membantu satu sama lain.Persiapan Kerja Lebih Matang: Dengan kurikulum yang dirancang sesuai kebutuhan industri, Anda akan lebih siap menghadapi tantangan di dunia kerja. Dengan berbagai manfaat ini, belajar Laravel di BuildWithAngga akan membantu Anda menguasai framework ini dengan lebih cepat dan efisien. Kesimpulan Dalam artikel ini, kita telah membahas tujuh tutorial dasar dalam menggunakan Laravel, mulai dari mengatur database connection hingga membuat model, controller, dan migration. Setiap tutorial dirancang untuk memberikan pemahaman yang kuat tentang konsep-konsep dasar yang akan sering Anda gunakan dalam pengembangan aplikasi Laravel. Dengan memahami dan menguasai dasar-dasar ini, Anda akan lebih siap untuk menjelajahi fitur-fitur Laravel yang lebih lanjut dan kompleks di bagian berikutnya. Jangan lupa untuk terus berlatih dan mencari mentor yang bisa membimbing Anda dalam perjalanan belajar ini, seperti yang ditawarkan oleh BuildWithAngga. Selamat belajar dan semoga sukses!

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 🥰