Tips User-Interface

Di dunia desain digital yang bergerak cepat, efisiensi dan kualitas adalah hal yang sangat penting. UI Kits, koleksi elemen UI yang telah didesain sebelumnya, telah muncul sebagai alat yang tak ternilai bagi para desainer, memperlancar proses desain dan memastikan konsistensi di seluruh proyek. Gambaran komprehensif ini akan mengeksplorasi manfaat, fitur utama, dan platform UI Kit yang populer, memberikan kamu pemahaman yang lebih dalam tentang bagaimana sumber daya ini dapat meningkatkan alur kerja desainmu. Dalam artikel kali ini, kita akan berkenalan dengan 3 Resources UI Kit yang populer di tahun 2024! Apa saja sih? Universal UI Starter Kit Bayangkan kamu sedang membangun sebuah rumah. Kamu pasti membutuhkan fondasi yang kuat, kan? Nah, Universal UI Starter Kit itu seperti fondasi untuk desain website atau aplikasi kamu. Universal Starter Kit ini adalah kumpulan komponen desain yang sudah jadi, seperti tombol, kotak input, menu navigasi, dan elemen-elemen lainnya yang sering digunakan dalam desain antarmuka pengguna (UI). Semua komponen ini sudah dirancang dengan baik dan siap pakai, sehingga kamu tidak perlu membuat semuanya dari awal. Kelebihan Universal UI Starter Kit: Menghemat Waktu: Karena komponen-komponen sudah siap pakai, kamu bisa langsung menggunakannya tanpa perlu mendesain ulang. Ini akan sangat menghemat waktu pengerjaan proyek.Konsisten: Semua komponen dalam satu kit biasanya dirancang dengan gaya yang sama, sehingga desain kamu akan terlihat lebih konsisten dan profesional.Mudah Dikustomisasi: Meskipun sudah jadi, kamu tetap bisa menyesuaikan komponen-komponen ini sesuai dengan kebutuhan proyekmu.Efisien: Dengan menggunakan starter kit, kamu bisa fokus pada bagian yang lebih kreatif dari desainmu, seperti tata letak dan pemilihan warna. Spotify - Mobile UI Kit Ketika kamu ingin membuat aplikasi musik seperti Spotify. Kamu bisa saja membuat semua desainnya dari awal, satu per satu. Tapi, akan lebih cepat dan efisien jika kamu menggunakan "blueprint" yang sudah ada, bukan? Nah, Spotify - Mobile UI Kit itu seperti "blueprint" siap pakai untuk aplikasi musik. Ini adalah kumpulan komponen desain yang sudah jadi, seperti tombol "Play", tampilan daftar lagu, profil pengguna, dan elemen-elemen khas Spotify lainnya. Semua komponen ini sudah dirancang dengan gaya khas Spotify dan siap kamu gunakan untuk membuat aplikasi musikmu sendiri. Kelebihan Spotify - Mobile UI Kit: Menghemat Waktu: Kamu tidak perlu mendesain ulang semua elemen dari awal. Cukup sesuaikan dengan kebutuhan aplikasi kamu.Konsisten dengan Brand Spotify: Desainnya sudah mengikuti gaya visual Spotify, jadi aplikasi kamu akan terlihat lebih profesional dan familiar bagi pengguna Spotify.Inspirasi Desain: Kamu bisa melihat bagaimana Spotify merancang antarmuka pengguna mereka dan mendapatkan inspirasi untuk desain aplikasi musikmu. ShaynaKIT ShaynaKit.com adalah sebuah platform yang menyediakan berbagai macam sumber daya desain, terutama UI Kit dan template website. Bayangkan ini seperti sebuah toko perlengkapan desain, di mana kamu bisa menemukan berbagai macam "bahan baku" untuk membangun desain website atau aplikasi kamu. Kelebihan ShaynaKit.com: Beragam Pilihan: ShaynaKit.com menawarkan banyak pilihan UI Kit dan template dengan berbagai gaya dan tema. Jadi, kamu bisa memilih yang paling sesuai dengan kebutuhan proyekmu.Mudah Digunakan: Sumber daya yang disediakan umumnya sudah siap pakai dan mudah disesuaikan. Kamu tidak perlu memulai dari nol.Hemat Waktu: Dengan menggunakan sumber daya dari ShaynaKit.com, kamu bisa menghemat waktu yang biasanya digunakan untuk mendesain elemen-elemen dasar.Inspirasi Desain: Melihat berbagai desain yang ada di ShaynaKit.com bisa memberikanmu inspirasi untuk proyek desainmu sendiri.Komponen Lengkap: Selain UI Kit, ShaynaKit.com juga menyediakan berbagai komponen desain lainnya seperti ikon, ilustrasi, dan font yang bisa kamu kombinasikan. Kesimpulan UI Kits telah menjadi alat yang tak tergantikan bagi desainer modern, menawarkan berbagai manfaat dalam hal efisiensi, konsistensi, dan kualitas. Dengan memanfaatkan sumber daya yang telah didesain sebelumnya, desainer dapat memperlancar alur kerja mereka, menciptakan antarmuka yang menarik secara visual, dan memberikan pengalaman pengguna yang luar biasa. Baik kamu seorang profesional berpengalaman atau desainer pemula, menjelajahi UI Kits dapat secara signifikan meningkatkan proses desainmu 🤩 Yuk ikuti kelas-kelas UI/UX di BuildWithAngga untuk asah skill dan pengetahuanmu di bidang ini! Bangun portfolio berkualitas dan kesempatan magang di sini! 😁

User-Interface (UI) dan User-Experience (UX) design adalah elemen kunci dalam pembuatan produk digital yang sukses. Namun, bagi para UI/UX designer pemula, seringkali menemukan kesalahan umum yang dapat menghambat progress pekerjaan mereka. Dalam artikel ini, kita akan membahas lima kesalahan yang sering dilakukan oleh UI/UX Designer pemula besera tips-tipsnya! 1. Mengabaikan Riset Pengguna Salah satu kesalahan besar yang sering dilakukan oleh desainer UI/UX pemula adalah mengabaikan riset pengguna. Mereka mungkin terlalu fokus pada aspek estetika desain tanpa memahami kebutuhan dan preferensi pengguna. Kebanyakan mereka berpikir bahwa pekerjaan UI/UX hanya membuat desain yang menarik dan eye-catching. Tanpa riset yang baik, desainer bisa saja menghasilkan desain yang tidak sesuai dengan kebutuhan pengguna, sehingga mengurangi efektivitas produk digital tersebut. Di sinilah “empati” designer diuji. UI/UX designer harus memiliki empati yang tinggi agar kita bisa memberi pengaruh yang tepat dalam desain aplikasi/website ke pengguna. 2. Overdesign Seringkali, desainer pemula cenderung terlalu banyak membuat desain elemen-elemen antarmuka. Ini dapat mengakibatkan tampilan yang berlebihan dan membingungkan bagi pengguna. Terlalu banyak elemen dekoratif dan animasi yang tidak perlu dapat mengganggu fokus pengguna dan memperlambat kinerja aplikasi. Desain haruslah sederhana, intuitif, dan efisien. 3. Kurang Memahami Prinsip-prinsip UX Image by https://lawsofux.com/ “Tidak Memahami Prinsip-prinsip UX” Desainer UI/UX pemula sering tidak memahami prinsip-prinsip dasar UX design, seperti fokus desain harus sesuai kebutuhan pengguna, desain harus konsisten, desain mudah digunakan, dan memastikan hierarki desain yang tepat. Kekurangpahaman terhadap prinsip-prinsip ini dapat mengakibatkan desain yang tidak mudah digunakan dan membingungkan bagi user. Mempelajari prinsip-prinsip UX design adalah langkah kunci dalam menghindari kesalahan ini. 4. Tidak Mendengarkan feedback Kesalahan lain yang sering dilakukan oleh desainer UI/UX pemula adalah tidak mendengarkan umpan balik pengguna. Feedback dari pengguna/user sangat penting untuk meningkatkan pengalaman pengguna dan mengidentifikasi masalah dalam desain. Mengabaikan feedback dapat mengakibatkan kesalahan yang tidak terdeteksi dan merugikan produktivitas. 5. Tidak Menguji Desain Terakhir, banyak UI/UX designer pemula gagal melakukan pengujian desain. Hal ini adalah tahap kunci dalam mengidentifikasi masalah dan memastikan bahwa desain berfungsi sesuai yang diharapkan. Tanpa tahap pengujian, kesalahan dapat terlewatkan dan mengakibatkan produk digital yang kita buat jadi kurang efektif. Ketika ingin menjadi UI/UX designer yang lebih baik, penting untuk menghindari kesalahan-kesalahan tersebut. Terlibatlah dalam riset pengguna, terapkan prinsip-prinsip UX design, memahami dan mendengarkan feedback pengguna, dan uji desain Anda secara teratur. Dengan begitu, Anda dapat impove kualitas desain Anda dan menampilkan pengalaman pengguna yang lebih baik m produk digital yang Anda buat. Kesimpulan 💬 Sebagai seorang UI/UX designer pemula, kesalahan adalah hal yang wajar dalam proses pembelajaran. Namun, dengan menyadari kesalahan-kesalahan umum ini dan berusaha untuk menghindarinya, kamu dapat mengembangkan keterampilan desain kamu dengan lebih cepat dan menciptakan produk yang lebih baik. “Design” adalah seni yang terus berkembang, dan selalu ada ruang untuk belajar dan meningkatkan diri 😊 Berikut beberapa tips untuk UI/UX pemula 💯: 1. Lack of Emphaty to User? Melakukan Penelitian Pengguna: Lakukan penelitian berupa wawancara, survey, dan observasi terhadap pengguna yang sesungguhnya. Pahami kebutuhan, masalah, dan preferensi mereka. Buat Persona Pengguna: Kita bisa juga membuat profil pengguna yang mencerminkan karakteristik utama audiens kamu, sehingga Anda dapat merujuknya selama proses desain. 2. Bagi Anda yang merasa terlalu banyak informasi dalam UI-mu: Prioritaskan Informasi: Identifikasi informasi utama yang harus diberikan kepada pengguna dan tampilkan dengan jelas. Informasi tambahan bisat ditempatkan pada halaman atau layar yang berbeda. Hierarki Visual: Gunakan elemen desain seperti ukuran, warna, dan tata letak untuk menyoroti informasi yang paling penting dan menarik perhatian pengguna. 3. Tidak menerapkan/memahami prinsip-prinsip UX? Perbanyak Belajar Prinsip-prinsip Desain: Pahami prinsip-prinsip dasar seperti konsistensi, kesederhanaan, dan fokus pada pengguna. Rajin Pantau Perkembangan Desain: Selalu ikuti tren dan perkembangan terbaru dalam desain UI/UX untuk tetap relevan dan up-to-date. 4. Dengarkan dan pahami feedback! Bekerja dalam Tim: Kerja sama dengan rekan-rekan tim dan pengguna untuk mengumpulkan perspektif dan feedback yang berbeda dan memperkaya desain Anda. Terbuka terhadap Feedback: Terima feedback dengan pikiran terbuka, dan jadikan hal tersebut sebagai kesempatan untuk memperbaiki desainmu. 5. Jangan lupa menguji desain apakah sudah responsive dan mudah diakses atau belum Pastikan desain Anda responsif, sehingga dapat menyesuaikan dengan berbagai ukuran layar dan perangkat (Mobile/Web design). Perhatikan aksesibilitas dengan memastikan bahwa produk Anda dapat diakses oleh semua orang, termasuk mereka yang memiliki disabilitas. Ikuti pedoman/arahan aksesibilitas web seperti WCAG (Web Content Accessibility Guidelines). Jadi gimana? Sudah tahu kan apa yang harus dilakukan dan apa yang harus dihindari sebagai UI/UX designer pemula? Yuk ikut kelas UI/UX Design untuk belajar lebih dalam tentang UI/UX supaya kamu terhindar dari kesalahan-kesalahan di atas dan bangun portofolio berkualitas! Semoga bermanfaat ya! 😊

UI/UX (User Interface dan User Experience) adalah dua hal penting yang perlu diperhatikan saat kamu mengembangkan sebuah produk, supaya pengguna merasa nyaman. Desain yang bagus itu nggak cuma harus enak dilihat, tapi juga harus bisa berfungsi dengan baik dan memberikan pengalaman yang memuaskan buat pengguna. Salah satu cara yang sudah terbukti efektif untuk menghasilkan desain yang keren adalah dengan menggunakan pendekatan Design Thinking. UI atau User Interface berfokus pada tampilan visual dan interaksi yang dilihat serta dilakukan oleh pengguna, sedangkan UX atau User Experience lebih menitikberatkan pada bagaimana pengalaman keseluruhan yang dirasakan oleh pengguna saat menggunakan produk tersebut. Desain yang bagus itu nggak cuma harus enak dilihat, tapi juga harus bisa berfungsi dengan baik dan memberikan pengalaman yang memuaskan buat pengguna. Di artikel ini, aku bakal ngebahas tentang konsep Design Thinking dalam dunia UI/UX dan gimana cara ini bisa membantu menciptakan pengalaman pengguna yang lebih baik. Lalu Apa Itu Design Thinking? Design Thinking adalah cara berpikir kreatif yang fokus banget untuk benar-benar paham apa yang pengguna butuhkan, supaya kita bisa bikin solusi yang sesuai dengan harapan mereka. Dalam pendekatan ini, kita mulai dari mengenali masalah, ngumpulin informasi, eksplorasi ide-ide baru, sampai menguji konsep lewat proses yang berulang. Di Design Thinking, pengguna adalah pusat dari segala proses desain, jadi kita sebagai desainer harus benar-benar mengerti apa yang mereka butuhkan, inginkan, dan dalam situasi apa mereka menggunakan produk kita. Dalam UI/UX, Design Thinking dipakai buat lebih memahami pengguna dengan lebih mendalam. Manfaat Design Thinking dalam UI/UX: Pengalaman pengguna yang lebih baik: Dengan memahami perilaku dan preferensi pengguna, desainer UI/UX dapat menciptakan antarmuka yang intuitif, mudah digunakan, dan menyenangkan.Desain yang lebih efisien: Design Thinking membantu mengidentifikasi fitur-fitur yang benar-benar dibutuhkan pengguna, sehingga desain yang dihasilkan menjadi lebih fokus dan efisien.Peningkatan konversi: Dengan desain yang menarik dan mudah digunakan, produk atau layanan dapat meningkatkan tingkat konversi dan retensi pengguna.Pengurangan biaya pengembangan: Dengan melakukan pengujian dan iterasi sejak awal, masalah-masalah desain dapat diidentifikasi dan diatasi lebih cepat, sehingga mengurangi biaya pengembangan. Seperti kata Michael Shanks dari Stanford University, dalam bukunya "Design Thinking and Design Theory," bilang kalau penting banget buat desainer untuk menggabungkan teori dan praktik saat menggunakan Design Thinking. Dia juga menekankan pentingnya punya pemahaman yang kuat tentang teori desain dan berbagai pendekatan metodologis, sambil tetap fleksibel dan kreatif dalam eksplorasi ide. Pendekatan-pendekatan Design Thinking! Empati: Empati adalah pondasi dari Design Thinking. Ini adalah kemampuan untuk memahami dan merasakan apa yang dirasakan oleh orang lain, dalam hal ini, pengguna produk atau layanan kita. Bayangkan kamu sedang membuat sebuah aplikasi pesan instan. Dengan empati, kamu tidak hanya berpikir tentang fitur-fitur apa yang bisa dimasukkan, tapi juga bagaimana perasaan pengguna saat mengirim pesan kepada orang yang dicintai, atau saat mengalami kendala teknis. Mengapa Empati Penting? Membangun koneksi: Dengan memahami pengguna, kita bisa membangun hubungan emosional yang kuat antara pengguna dan produk.Menemukan kebutuhan tersembunyi: Seringkali, pengguna tidak bisa secara langsung mengungkapkan apa yang mereka butuhkan. Melalui empati, kita bisa menggali lebih dalam dan menemukan kebutuhan yang tersembunyi.Mencegah bias: Empati membantu kita menghindari asumsi-asumsi yang salah tentang pengguna.Membuat solusi yang relevan: Dengan memahami perspektif pengguna, kita bisa menciptakan solusi yang benar-benar menjawab permasalahan mereka. Definisi Masalah Setelah kita tahu banyak tentang pengguna kita, langkah selanjutnya adalah mencari tahu masalah apa yang mereka hadapi. Ini kayak kita lagi nyusun puzzle, tapi potongan-potongan puzzlenya masih berantakan. Definisi masalah itu kayak lem yang bakal nyatuin semua potongan puzzle itu. Dengan kata lain, kita harus bisa merumuskan masalah dengan jelas dan spesifik. Misalnya, kalau kita lagi bikin aplikasi buat belajar bahasa, masalahnya bukan cuma 'susah belajar bahasa', tapi bisa lebih spesifik, 'pengguna kesulitan menemukan materi belajar yang sesuai dengan level mereka'. Dengan definisi yang jelas, kita bisa mulai mikirin solusi yang kreatif, seperti fitur rekomendasi materi belajar yang disesuaikan dengan kemampuan pengguna. Kenapa sih definisi masalah itu penting? 🤔 Fokus yang Jelas: Dengan definisi masalah yang jelas dan terarah, tim dapat fokus pada pemecahan masalah yang tepat. Ini menghindari penyimpangan dari tujuan utama dan memastikan semua upaya tertuju pada satu sasaran.Solusi yang Relevan: Pemahaman yang mendalam tentang masalah memungkinkan tim untuk merancang solusi yang benar-benar relevan dan menjawab kebutuhan pengguna. Solusi yang dihasilkan tidak hanya sekadar memenuhi syarat, tetapi juga memberikan nilai tambah bagi pengguna.Alokasi Sumber Daya yang Efektif: Definisi masalah yang baik membantu tim dalam mengalokasikan sumber daya (waktu, tenaga, anggaran) secara efisien. Dengan fokus pada masalah yang tepat, tim dapat menghindari pemborosan sumber daya.Evaluasi yang Objektif: Definisi masalah yang jelas menjadi tolak ukur untuk mengevaluasi keberhasilan solusi yang dihasilkan. Tim dapat mengukur seberapa baik solusi tersebut mengatasi masalah yang telah diidentifikasi. Ideasi Menciptakan Solusi Bayangkan kamu sedang berada di sebuah pesta di mana semua orang diundang untuk berbagi ide yang paling gila sekalipun. Tahap ideasi dalam Design Thinking itu seperti pesta tersebut, hanya saja yang kita rayakan adalah ide-ide untuk memecahkan masalah. Ini adalah waktu yang tepat untuk membiarkan imajinasi kita terbang bebas dan menghasilkan ide-ide yang mungkin terdengar aneh di awal, tapi bisa jadi sangat inovatif jika kita kembangkan lebih lanjut. Mengapa Ideasi Sangat Penting? Inovasi yang Tak Terbatas: Ideasi adalah sumber utama dari inovasi. Di sinilah kita menemukan solusi-solusi baru yang belum pernah terpikirkan sebelumnya. Dengan menghasilkan banyak ide, kita membuka peluang untuk menemukan pendekatan yang unik dan kreatif dalam mengatasi masalah.Memecahkan Masalah dari Berbagai Sudut: Setiap orang memiliki perspektif yang berbeda. Ketika kita mengumpulkan banyak ide dari berbagai orang, kita akan melihat masalah dari sudut pandang yang berbeda-beda. Hal ini memungkinkan kita untuk menemukan solusi yang lebih komprehensif.Memperkaya Solusi: Ide-ide yang dihasilkan dalam tahap ideasi tidak hanya berfungsi sebagai solusi akhir, tetapi juga sebagai bahan baku untuk mengembangkan solusi yang lebih baik. Kita bisa menggabungkan, memodifikasi, atau mengembangkan ide-ide ini menjadi solusi yang lebih komprehensif dan efektif.Meningkatkan Kualitas Keputusan: Dengan memiliki banyak pilihan, kita bisa membuat keputusan yang lebih baik. Kita dapat membandingkan berbagai ide, menimbang kelebihan dan kekurangannya, dan memilih ide yang paling sesuai dengan kebutuhan dan tujuan kita. Prototype dan Testing Setelah kita punya banyak ide keren, kita harus buktiin kalau ide-ide kita itu bener-bener bisa jalan. Prototipe itu kayak percobaan pertama kita untuk mewujudkan ide-ide tersebut. Dengan bikin prototipe, kita bisa lihat apakah ide kita itu masuk akal dan bisa diimplementasikan. Uji coba pun penting banget karena kita bisa langsung dapat feedback dari pengguna. Mereka akan kasih tahu kita apa yang mereka suka dan nggak suka dari produk kita. Dengan begitu, kita bisa terus memperbaiki produk kita sampai benar-benar sesuai dengan kebutuhan pengguna. Prototipe adalah versi awal dari produk kita. Ini bisa berupa sketsa di atas kertas, model 3D, atau bahkan aplikasi yang masih sederhana. Tujuannya adalah untuk memvisualisasikan bagaimana produk kita akan terlihat dan bekerja. Uji coba adalah proses di mana kita meminta pengguna untuk mencoba prototipe kita dan memberikan feedback. Feedback dari pengguna sangat berharga karena mereka bisa memberikan perspektif yang berbeda dan membantu kita menemukan masalah yang mungkin belum kita sadari. Kenapa prototipe dan uji coba itu penting? Visualisasi Ide: Prototipe memberikan representasi visual dari ide-ide yang telah dihasilkan. Ini memungkinkan tim untuk melihat secara konkret bagaimana solusi yang diusulkan akan terlihat dan berfungsi.Pengumpulan Feedback: Uji coba prototipe memungkinkan tim untuk mengumpulkan feedback langsung dari pengguna. Feedback ini sangat berharga untuk mengidentifikasi area yang perlu diperbaiki dan ditingkatkan.Iterasi yang Efektif: Hasil dari pengujian prototipe dapat digunakan sebagai dasar untuk melakukan iterasi pada desain. Tim dapat melakukan penyesuaian dan perbaikan sebelum investasi yang lebih besar dilakukan dalam pengembangan produk.Mencegah Kesalahan: Dengan menguji prototipe secara berkala, tim dapat mengidentifikasi dan memperbaiki kesalahan atau kekurangan pada desain sebelum produk diluncurkan secara resmi. Ini membantu menghindari pemborosan waktu dan sumber daya.Meningkatkan Kualitas Produk Akhir: Melalui proses prototipe dan uji coba yang berulang, tim dapat menghasilkan produk akhir yang lebih berkualitas, lebih user-friendly, dan lebih sesuai dengan kebutuhan pengguna. Penyesuaian Hasil Design atau Iterasi Bayangin kamu bikin aplikasi baru. Pasti kamu mau aplikasi kamu disukai banyak orang, kan? Nah, untuk bikin aplikasi yang disukai banyak orang, kita nggak bisa cuma mengandalkan feeling kita aja. Kita perlu iterasi terus-menerus, artinya kita terus-menerus memperbaiki aplikasi kita berdasarkan masukan dari pengguna. Refleksi itu penting banget karena kita bisa belajar dari kesalahan dan melihat apa yang bisa kita tingkatkan. Dengan begitu, aplikasi kita bisa terus berkembang dan menjadi lebih baik. Iterasi adalah proses memperbaiki dan mengembangkan sesuatu secara berulang-ulang. Dalam desain produk, iterasi berarti kita terus-menerus memperbaiki desain kita berdasarkan feedback yang kita dapatkan. Mengapa Iterasi itu Penting? 1. Sempurnakan Desain Secara Bertahap: Detail yang Terlewat: Iterasi memungkinkan kita untuk melihat detail-detail kecil yang mungkin terlewatkan pada desain awal.Perbaikan Berkelanjutan: Setiap siklus iterasi adalah kesempatan untuk memperbaiki dan menyempurnakan desain.Sesuaikan dengan Kebutuhan Pengguna: Kita bisa terus-menerus menyesuaikan desain agar sesuai dengan feedback dan perubahan kebutuhan pengguna. 2. Pengalaman Pengguna yang Optimal: Intuitif dan Mudah Digunakan: Iterasi memastikan desain intuitif dan mudah digunakan oleh semua pengguna.Visual yang Menarik: Tampilan visual yang menarik dan konsisten dapat dicapai melalui proses iterasi.Fungsinya Optimal: Setiap elemen desain diuji dan disempurnakan untuk memastikan fungsinya sesuai dengan tujuan. Kesimpulan Design Thinking adalah pendekatan penting yang dapat membantu kita menciptakan solusi yang benar-benar relevan dan efektif untuk pengguna. Dengan langkah-langkah seperti empati, kita bisa memahami kebutuhan dan keinginan pengguna secara mendalam. Lalu, di tahap definisi masalah, kita memperjelas tantangan yang ingin kita selesaikan. Setelah itu, ideasi memungkinkan kita untuk mengeksplorasi berbagai ide kreatif sebagai solusi potensial. Melalui tahap prototipe, kita bisa menguji ide-ide tersebut dalam bentuk yang lebih nyata, dan di tahap uji coba, kita melihat bagaimana pengguna berinteraksi dengan solusi kita. Yang tak kalah penting, proses iterasi memungkinkan kita terus mengembangkan dan memperbaiki desain berdasarkan umpan balik pengguna. Dengan mengikuti setiap tahap ini, kita dapat memastikan bahwa produk atau layanan yang kita buat benar-benar sesuai dengan kebutuhan pengguna dan memberikan pengalaman yang memuaskan. Nah kalau kamu mau belajar lebih lagi tentang Design Thinking dalam UI/UX, kamu bisa ikuti kelas-kelas UI/UX BuildWithAngga untuk mengasah pengetahuanmu dan bangun portfolio berkualitas! Kamu juga bisa loh dapat sertifikat dan magang di BuildWithAngga! 🤩

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! 🤩

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!

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!

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

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

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

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