Tips All

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

Dark Mode pada UI (User Interface) adalah mode tampilan di mana warna background utama UI menjadi gelap atau hitam, sedangkan elemen-elemen antarmuka seperti teks dan ikon menjadi lebih terang atau berwarna kontras. Ini menciptakan kontras yang lebih baik dan mengurangi kecerahan layar, yang bisa mengurangi kelelahan mata dan membuat pengalaman pengguna lebih nyaman, terutama dalam kondisi pencahayaan rendah. Secara sederhana, dark mode adalah skema warna pada interface yang memberikan tampilan teks dan ikon cerah dalam latar belakang yang gelap, menurut Phone Arena. Salah satu alasan kenapa hal ini begitu populer ya tentunya karena desain ini lebih nyaman untuk mata pengguna 🤩 Dibandingkan dengan melihat layar tampilan light mode, memang mata kita akan lebih nyaman dengan dark mode. © https://shaynakit.com/details/kreatop-dashboard-dark-mode-green-v1-website-design Manfaat Menggunakan Dark Mode Dark Mode memiliki beberapa manfaat sederhana seperti: Pengurangan kelelahan mata: Warna gelap pada background dapat mengurangi stres mata dan membuat pengguna lebih nyaman, terutama dalam kondisi pencahayaan rendah.Peningkatan keterbacaan: Kontras yang lebih besar antara teks dan background membuat teks lebih mudah dibaca, terutama untuk orang dengan gangguan penglihatan atau bagi kamu yang menghabiskan banyak waktu di depan layar.Penghematan daya baterai: Latar berwarna gelap menggunakan lebih sedikit energi, khususnya pada perangkat seluler dengan layar OLED atau AMOLED, karena pixel yang menampilkan warna hitam tidak memerlukan daya.Aesthetic & Modern: Dark Mode sering dianggap sebagai pilihan yang lebih modern dan elegan, memberikan tampilan yang berbeda dan menarik bagi kamu sebagai use.Mengurangi gangguan cahaya: Pada malam hari atau dalam situasi pencahayaan rendah, Dark Mode dapat membantu mengurangi kecerahan layar yang mengganggu, membantu user tidur lebih nyenyak dan mengurangi gangguan visual! ©https://shaynakit.com/details/wuyuqi-saas-startup-modern-mobile-dark-ui-design Beberapa kelebihan Dark Mode juga antara lain: Memberi lebih sedikit blue light atau cahaya biru yang ditampilkan dari gadget.Lebih cocok untuk pengaturan cahaya redup sehingga bisa dengan nyaman gunakan gadget di tempat tidur.Menurut beberapa ahli mode gelap dapat membantu orang dengan sensitivitas cahaya atau gangguan penglihatan dibanding yang memiliki kemampuan penglihatan nornal. © https://shaynakit.com/details/kreatop-content-creator-saas-dashboard-dark-mode-design Kekurangan Dark Mode Meskipun Dark Mode memiliki banyak kelebihan, ada beberapa kekurangan yang perlu dipertimbangkan juga yaa! Ketidakcocokan dengan beberapa konten: Dark Mode mungkin tidak cocok untuk semua jenis konten atau aplikasi. Misalnya, untuk aplikasi yang berfokus pada pembacaan teks panjang, pengguna mungkin lebih memilih latar belakang yang cerah untuk keterbacaan yang lebih baik.Pengalaman konsistensi interface: Ketika pengguna beralih antara aplikasi yang mendukung Dark Mode dan yang tidak, pengalaman user dapat menjadi tidak konsisten. Ini terutama terjadi jika ada perubahan tiba-tiba antara dark mode dan mode terang.Tidak cocok untuk kondisi pencahayaan tinggi: Meskipun Dark Mode ideal untuk kondisi pencahayaan rendah, user mungkin menemukan sulit untuk melihat layar dengan jelas dalam kondisi pencahayaan tinggi atau di bawah sinar matahari langsung.Kurangnya standar desain: Tidak ada standar yang ditetapkan untuk implementasi Dark Mode, sehingga pengalamanmu dapat bervariasi antara aplikasi satu dan lainnya. Ini dapat menyebabkan kebingungan atau ketidaknyamanan bagi user.Penurunan kualitas warna: Pada beberapa layar, penggunaan Dark Mode dapat menyebabkan penurunan kualitas warna atau detail gambar karena mode gelap mengurangi kecerahan dan kontras warna. Meskipun demikian, kekurangan ini dapat diatasi dengan perencanaan desain yang cermat dan pengujian yang memadai untuk memastikan Dark Mode memberikan pengalamanmu atau user yang optimal. © https://shaynakit.com/details/tieats-categories-pages-design Kapan Kita Menggunakan Dark Mode? Kita memakai Dark Mode terutama dalam kondisi-kondisi berikut ini nih guys: Saat berada dalam lingkungan dengan pencahayaan rendah, seperti malam hari atau ruangan yang kurang terang, Dark Mode membantu mengurangi kecerahan layar dan menghindari ketegangan mata kita.Saat menggunakan perangkat pada malam hari atau sebelum tidur, Dark Mode membantu mengurangi paparan cahaya biru yang dapat mengganggu ritme tidur dan kualitas istirahat.Pada perangkat cellular, menggunakan Dark Mode dapat membantu menghemat daya baterai, terutama pada layar jenis OLED atau AMOLED, karena piksel hitam tidak menggunakan energi.Beberapa pengguna juga menyukai tampilan estetika dan modern dari Dark Mode, dan memilih untuk menggunakannya sepanjang waktu, terlepas dari kondisi pencahayaan.Ketika user ingin mengurangi kecerahan layar tanpa mengurangi fungsionalitas atau keterbacaan konten, Dark Mode adalah pilihan yang baik untuk menciptakan pengalaman yang nyaman. Nah, Kenapa sih Dark Mode Bagus Untuk Mata? Dark mode dianggap baik untuk mata karena dapat membantu mengurangi ketegangan mata, terutama dalam kondisi pencahayaan rendah. Beberapa alasan mengapa dark mode dianggap baik untuk mata antara lain: Reduce Tingkat Kecerahan Layar: Dark mode mengurangi kecerahan background layar, yang dapat membantu menghindari kelelahan mata. Pengurangan kecerahan ini terutama berguna dalam situasi pencahayaan rendah atau saat menggunakan perangkat pada malam hari.Kontras yang Lebih Baik: Dark mode menciptakan kontras yang lebih baik antara teks atau elemen antarmuka dengan background! Kontras yang lebih tinggi dapat membuat teks lebih mudah dibaca dan meminimalkan ketegangan mata lho!Pengurangan Paparan Blue Light: Dark mode sering kali melibatkan pengurangan paparan blue light dari layar. Blue light dapat mengganggu kualitas tidur. Dengan menggunakan dark mode, terutama pada malam hari, paparan cahaya biru dapat diminimalkan.Peningkatan Keterbacaan: Warna text yang lebih terang pada background gelap dapat meningkatkan keterbacaan. Ini dapat membantu mata fokus dengan lebih baik pada konten, terutama dalam kondisi pencahayaan yang kurang optimal. Meskipun banyak orang merasa lebih nyaman dengan dark mode, preferensi visual dapat bervariasi dari individu ke individu. Yang terpenting adalah memberikan opsi kepada user untuk memilih mode tampilan yang paling sesuai dengan preferensi dan kenyamanan mereka. Kesimpulan! Dalam kesimpulannya, Dark Mode pada UI/UX design membawa sejumlah manfaat yang “signifikan,” termasuk pengurangan ketegangan mata, peningkatan keterbacaan, penghematan daya baterai, dan memberikan estetika modern yang interesting. Pilihan ini menjadi lebih populer karena memberikan pengalaman visual yang nyaman, terutama dalam kondisi pencahayaan rendah atau saat menggunakan perangkat pada malam hari. Meskipun begitu, Dark Mode yang efektif memerlukan perhatian terhadap kontras, konsistensi desain, dan keterbacaan agar dapat memberikan experience kamu yang optimal. Penting juga untuk memberikan opsi kepada pengguna untuk memilih antara Dark Mode dan Light Mode sesuai dengan preferensi mereka sendiri. Dengan memperhatikan aspek-aspek ini, Dark Mode dapat menjadi fitur yang memperkaya pengalaman pengguna dan meningkatkan kenyamanan dalam penggunaan aplikasi atau situs web. Tertarik untuk belanar lebih dalam? Di BuildWithAngga, kamu bisa ikuti roadmap kelas belajar UI/UX gratis! Dan kelas-kelas ini sudah berurutan mulai dari mana kamu harus belajar 😍 See you di kelas ;)

Setelah artikel sebelumnya yaitu Berkenalan Dengan Alpine JS dan Membuat Modal Dengan Alpine JS maka dalam artikel kali ini kita akan membahas studi kasus penggunaannya agar kita memahami keunggulan dari teknologi yang satu ini. Alpine JS sendiri merupakan sebuah lightweight framework Javascript yang dapat kita manfaatkan untuk membuat sebuah interaktif website tanpa harus menggunakan framework seperti React atau Vue. Ketika menggunakan Alpine JS kita dapat dengan mudah langsung menerapkan sifat Javascript kedalam file HTML tanpa perlu menuliskannya secara terpisah. Maka dari itu dalam artikel kali ini kita akan melakukan studi kasus yaitu Fetching Data Menggunakan Alpine JS. So let’s start the code! Persiapan Silahkan kamu buat file HTML dengan nama index.html, kemudian sisipkan kode berikut kedalam file HTML kamu. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tutorial Fetching Data Menggunakan Alpine JS</title> <!-- Import Alpine JS --> <script defer src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js>"></script> <!-- Fonts Google --> <link rel="preconnect" href="<https://fonts.googleapis.com>" /> <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin /> <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap>" rel="stylesheet" /> <link href="<https://fonts.googleapis.com/css2?family=Inter&display=swap>" rel="stylesheet" /> <!-- Tailwind --> <script src="<https://cdn.tailwindcss.com>"></script> <!-- Font Awesome --> <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css>" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> body { font-family: "Poppins", sans-serif; } </style> </head> <body> <div class="container mx-auto h-96 p-3 w-full max-w-screen-md"> <h1 class="font-bold md:text-3xl mb-3">Fetching Data Menggunakan Alpine JS</h1> </div> </body> </html> Akan didapatkan hasil seperti ini: Nothing special, mari kita lanjutkan lebih dalam. Lets’ Code Slicing Komponen Card Setelah mempersiapkan project, kita akan membuat komponen card menggunakan Tailwind CSS, berikut kode yang akan kita gunakan: <div> <div class="grid grid-cols-4 gap-4"> <div> <div class="card h-full w-64 bg-white border rounded-md p-2 flex flex-col justify-between"> <div class="card-image mb-3"> <img src="<https://placeholder.com/100x100>" alt="Product Image" class="w-full rounded-md h-32" /> </div> <div class="card-title"> <h1 class="font-bold">Title</h1> </div> <div class="card-body my-3"> <p class="text-gray-500 my-3 text-xs">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, natus?</p> </div> <div class="card-footer"> <button class="rounded-md py-2 px-5 bg-sky-500 text-white text-xs">See More</button> </div> </div> </div> </div> </div> Akan didapatkan komponen seperti ini: Fetching Data Setelah membuat komponen card, mari kita melakukan proses pengambilan data atau fetching data menggunakan Alpine JS. Link URL endpoint API yang akan digunakan bisa kamu lihat disini, maka akan didapatkan: <https://dummyjson.com/docs/products> Kemudian kita akan melakukan fetching data dengan membuat fungsi bernama fetchProduct dan menggunakan kata kunci fetch yang disertai dengan proses chaining dengan method then: <script> function fetchProduct() { fetch("<https://dummyjson.com/products>") .then((res) => res.json()) .then((result) => { const data = result.products; console.log(data); }); } fetchProduct(); </script> Apabila apabila dijalankan akan didapatkan hasil sebagai berikut: Tapi sampai disini kita belum menampilkan data tersebut kedalam komponen card yang sudah dibuat sebelumnya. Langkah selanjutnya mari tampilkan data tersebut menjadi sebuah tampilan yang dimengerti pengguna. Tampilkan Ke Pengguna Untuk menampilkan data tersebut kita harus memindahkan proses logic sebelumnya kedalam container / pembungkus dari komponen card sebelumnya. Untuk lebih jelasnya perhatikan kode berikut: <div x-data="{ products: [] }" x-init="fetch('<https://dummyjson.com/products>') .then(response => response.json()) .then(data => { products = data.products })" > <!-- Komponen Card --> </div> Pada kode tersebut kita menggunakan dua directive yang disediakan oleh Alpine JS, yaitu: x-data berfungsi untuk menampung data logic Javascript agar berjalan langsung pada tag HTML tersebut. Pada kode tersebut kita membuat satu variabel dengan nama products yang bertipe data array. Variabel ini bertujuan untuk menampung data hasil fetching pada fungsi tersebut. x-init bertujuan untuk melakukan inisialisasi sebelum komponen tersebut di load. Pada kode tersebut kita menyisipkan fungsi fetch yang bertujuan untuk mengambil data dari endpoint API yang sudah kita siapkan sebelumnya. Kemudian sebelum halaman browser ditampilkan, Alpine JS akan melakukan proses fetching di belakang layar kemudian hasil dari fetching tersebut ditampung kedalam variabel products yang sudah dideklarasikan di awal. Langkah terakhir kita akan melakukan proses perulangan dari data tersebut agar bisa ditampilkan menjadi sebuah halaman yang dapat dimengerti pengguna. Untuk mencapai hal tersebut kita akan menggunakan directive dari Alpine JS yaitu x-for. <div class="grid grid-cols-4 gap-4"> <template x-for="product in products"> <div class="card bg-white border rounded-md p-2 flex flex-col justify-between"> <div class="card-image mb-3"> <img x-bind:src="product.thumbnail" x-bind:alt="product.description" class="w-full rounded-md h-32" /> </div> <div class="card-title"> <h1 class="font-bold text-md" x-text="product.title"></h1> </div> <div class="card-body my-3"> <p class="text-gray-500 my-3 truncate text-sm" x-text="product.description"></p> </div> <div class="card-footer"> <button class="rounded-md py-2 px-5 bg-sky-500 text-white">See More</button> </div> </div> </template> </div> Pada kode tersebut kita melakukan proses perulangan dari variabel products kemudian ditampung kembali dalam variabel product. Apabila kamu perhatikan, kita menggunakan directive bernama x-bind untuk menampilkan gambar berdasarkan data yang disediakan oleh endpoint tersebut. ... <img x-bind:src="product.thumbnail" x-bind:alt="product.description" class="w-full rounded-md h-32" /> ... Directive ini bertujuan agar kita dapat mencetak nilai dari Javascript langsung kedalam atribut HTML yang diinginkan. Kita juga menggunakan directive x-text untuk mencetak langsung data kedalam tampilan HTML. Apabila kita cek hasilnya akan didapatkan seperti ini: Selamat! kamu telah berhasil melakukan proses fetching dengan menggunakan Alpine JS dan langsung menampilkannya kepada pengguna tanpa harus menggunakan framework besar seperti React atau Vue. Kesimpulan Cukup simple bukan? Ketika menggunakan framework ini, kita dapat dengan mudah membuat website yang dinamis hanya dengan memanfaatkan HTML sebagai file utama dan tentunya ini sangat mempercepat waktu development website kamu. Oiya satu lagi, apabila kamu ingin mendalami dunia web development lebih jauh, yuk bergabung dalam kelas premium yang disediakan oleh BuildWithAngga. Di dalamnya kamu dapat belajar lebih banyak studi kasus dan dapat menambah portfolio kamu untuk menunjang karir yang akan datang. Mari bergabung dan sampai jumpa dikelas!

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

Pada artikel ini, kita akan melakukan latihan studi kasus membuat modal menggunakan Alpine JS. Jika kamu baru menemui artikel ini, saya rekomendasikan untuk membaca artikel sebelumnya yaitu Berkenalan Dengan Alpine JS. So Let’s start code! Persiapan Design modal yang akan kita gunakan pada artikel kali ini bisa kamu lihat disini. Kemudian silahkan kamu buat file HTML dengan nama index.html, kemudian masukkan kode berikut untuk inisialisasi pertama kali. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>⛰ Membuat Modal Dengan Alpine JS</title> <!-- Import Alpine JS --> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script> <!-- Fonts Google --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" /> <!-- Tailwind --> <script src="https://cdn.tailwindcss.com"></script> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> html { scroll-behavior: smooth; } body { font-family: "Poppins", sans-serif; } </style> </head> <body> <h1 class="font-bold text-center my-5">Membuat Modal Dengan Alpine JS 🎉</h1> </body> </html> Maka apabila kita buka file HTML tersebut, didapatkan hasil: Langkah selanjutnya mari kita lakukan proses slicing design modal tersebut menjadi code🔥 Slicing Design Modal Untuk membuat button, kita akan menggunakan Tailwind CSS sebagai proses main styling utama. Maka akan didapatkan kode sebagai berikut: <div class="flex flex-col justify-center items-center my-5"> <!-- Button Open Modal --> <button class="py-2 px-4 rounded-md border text-gray-600 border-gray-600 mb-3 shadow-sm" > Open Modal </button> </div> Kemudian kita akan melakukan proses slicing dari modal berdasarkan design yang sudah dipersiapkan di awal: <div class="flex flex-col justify-center items-center my-5"> <!-- Button Open Modal --> <button class="py-2 px-4 rounded-md border text-gray-600 border-gray-600 mb-3 shadow-sm" > Open Modal </button> <!-- Modal --> <div class="py-2 p-1 rounded-md border border-gray-600 w-96 shadow-md"> <div class="flex justify-end px-3"> <button> <i class="fa-solid fa-x hover:pointer"></i> </button> </div> <!-- Modal Content --> <div class="p-3"> <div class="flex items-center gap-x-3 text-gray-600 mb-5"> <div class="bg-gray-200 p-2 rounded-md w-10 h-10 flex items-center justify-center" > <i class="fa-regular fa-circle-check"></i> </div> <div> <p class="font-bold">Sure you want to accept?</p> <p class="text-gray-500">Are you sure want to accept this></p> </div> </div> <div class="flex items-center gap-2"> <button class="py-2 px-5 rounded-md border border-gray-600 text-gray-600 w-1/2" > No, cancel </button> <button class="py-2 px-5 rounded-md w-1/2 bg-gray-600 text-gray-100"> Yes, confirm </button> </div> </div> </div> </div> Didapatkan hasil: Implementasikan Alpine JS Setelah kita berhasil membuat kode dari hasil design figma yang sudah kita siapkan, maka pada langkah ini kita akan buat agar komponen tersebut memiliki fungsionalitas layaknya komponen modal pada umumnya. Silahkan kamu perhatikan tag div yang membungkus antara button dan komponen modal sebelumnya: <div class="flex flex-col justify-center items-center my-5" x-data="{openModal:false}" > <!-- Button --> <!-- Modal --> </div> Pada kode tersebut kita menambahkan inisialisasi data dengan menggunakan directive dari Alpine JS yaitu x-data untuk menampung sebuah variabel dengan nama openModal yang berisikan nilai awal berupa tipe data boolean. Kemudian kita akan menambahkan event ketika button tersebut di-klik maka akan mengubah isi nilai dari variabel openModal tersebut menjadi kebalikan dari nilai saat ini dengan menggunakan directive x-on:click, berikut implementasinya: <div class="flex flex-col justify-center items-center my-5" x-data="{openModal:false}" > <!-- Button --> <button class="py-2 px-4 rounded-md border text-gray-600 border-gray-600 mb-3 shadow-sm" x-on:click="openModal = !openModal" > Open Modal </button> <!-- Modal --> </div> Langkah selanjutnya kita akan menerapkan nilai dari variabel openModal tersebut terhadap modal yang sudah kita buat sebelumnya dengan menggunakan directive x-show: <div class="flex flex-col justify-center items-center my-5" x-data="{openModal:false}" > <!-- Button Open Modal --> <button class="py-2 px-4 rounded-md border text-gray-600 border-gray-600 mb-3 shadow-sm" x-on:click="openModal = !openModal" > Open Modal </button> <!-- Modal --> <div class="py-2 p-1 rounded-md border border-gray-600 w-96 shadow-md" x-show="openModal" > <!-- Modal Content --> </div> </div> Maka ketika button tersebut di-klik, akan didapatkan hasil seperti ini: Sampai sini kamu sudah berhasil membuat komponen modal menggunakan Alpine JS. Langkah selanjutnya merupakan opsional, jadi kita akan menambahkan transisi sederhana ketika modal tersebut muncul kepada pengguna. Tambahkan Transisi Perhatikan tag div yang membungkus modal tersebut, lalu tambahkan baris kode berikut: <!-- Modal --> <div class="py-2 p-1 rounded-md border border-gray-600 w-96 shadow-md" x-show="openModal" x-on:click.away="openModal=false" x-transition:enter="transition transform ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-[-20%] scale-90" x-transition:enter-end="opacity-100 translate-y-0 scale-100" x-transition:leave="transition transform ease-in duration-300" x-transition:leave-start="opacity-100 translate-y-0 scale-100" x-transition:leave-end="opacity-0 translate-y-[-20%] scale-90" > <!-- Modal Content --> </div> Pada kode di atas kita memanfaatkan directive yang disediakan oleh Alpine JS yaitu x-transition yang bertujuan untuk membuat transisi ketika modal tersebut muncul maka akan secara halus dan tidak kaku. Berikut adalah full source code yang sudah kita buat dalam artikel kali ini: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>⛰ Membuat Modal Dengan Alpine JS</title> <!-- Import Alpine JS --> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" ></script> <!-- Fonts Google --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" /> <!-- Tailwind --> <script src="https://cdn.tailwindcss.com"></script> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> html { scroll-behavior: smooth; } body { font-family: "Poppins", sans-serif; } </style> </head> <body> <div class="flex flex-col justify-center items-center my-5" x-data="{openModal:false}" > <!-- Button --> <button class="py-2 px-4 rounded-md border text-gray-600 border-gray-600 mb-3 shadow-sm" x-on:click="openModal = !openModal" > Open Modal </button> <!-- Modal --> <div class="py-2 p-1 rounded-md border border-gray-600 w-96 shadow-md" x-show="openModal" x-on:click.away="openModal=false" x-transition:enter="transition transform ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-[-20%] scale-90" x-transition:enter-end="opacity-100 translate-y-0 scale-100" x-transition:leave="transition transform ease-in duration-300" x-transition:leave-start="opacity-100 translate-y-0 scale-100" x-transition:leave-end="opacity-0 translate-y-[-20%] scale-90" > <div class="flex justify-end px-3"> <button x-on:click="openModal = false"> <i class="fa-solid fa-x hover:pointer"></i> </button> </div> <!-- Modal Content --> <div class="p-3"> <div class="flex items-center gap-x-3 text-gray-600 mb-5"> <div class="bg-gray-200 p-2 rounded-md w-10 h-10 flex items-center justify-center" > <i class="fa-regular fa-circle-check"></i> </div> <div> <p class="font-bold">Sure you want to accept?</p> <p class="text-gray-500">Are you sure want to accept this?</p> </div> </div> <div class="flex items-center gap-2"> <button class="py-2 px-5 rounded-md border border-gray-600 text-gray-600 w-1/2" x-on:click="openModal = false" > No, cancel </button> <button class="py-2 px-5 rounded-md w-1/2 bg-gray-600 text-gray-100" x-on:click="alert('Confirmed🎉')" > Yes, confirm </button> </div> </div> </div> </div> </body> </html> Kesimpulan Ok, cukup untuk sampai disini. Saya berharap kamu belajar banyak dari artikel ini, dan jangan lupa tetap untuk terus melakukan eksplorasi dengan latihan berbagai studi kasus agar kamu bisa menguasainya secara keseluruhan tanpa adanya kendala. Dan bagi kamu yang ingin mendalami dunia web development lebih lanjut, bisa bergabung dalam kelas premium yang disediakan oleh BuildWithAngga. Tunggu apalagi? Mari bergabung dan sampai jumpa dikelas👋

Alpine JS merupakan sebuah lightweight framework Javascript yang tergolong baru dibandingkan dengan framework seperti React atau Vue. Meskipun demikian, Alpine JS menyediakan beberapa kelebihan seperti ukuran yang kecil yakni hanya 8KB dan memberikan kemudahan bagi para developer untuk membuat website interaktif tanpa harus menuliskan file Javascript secara terpisah. Dengan Alpine.js, kamu bisa mendapatkan fitur seperti manipulasi state, event dan bahkan logic Javascript yang dimana hanya dilakukan langsung pada file HTML. Beberapa contoh penggunaan Alpine JS adalah kita dapat membuat komponen dinamis seperti dropdown, tombol, navigasi, dan tanpa perlu menggunakan framework seperti React atau Vue Instalasi Untuk menggunakan Alpine JS, kamu dapat membuka website dokumentasi resminya disini. Lalu silahkan copy link CDN yang terdapat pada website tersebut kedalam tag head file html kamu. <script src="//unpkg.com/alpinejs" defer></script> Hanya untuk keperluan user interface, kita akan menggunakan Tailwind CSS sebagai proses styling. <script src="https://cdn.tailwindcss.com"></script> Fitur Fitur yang disediakan oleh Alpine JS disebut Directive. Alpine JS memiliki 15 directive yang dapat kita gunakan, seperti: x-data, x-on, x-show,x-for, dan masih banyak lagi. a. Data / x-data Kita dapat menyisipkan data seperti variabel yang kemudian digunakan kedalam elemen HTML secara mudah menggunakan Alpine JS, berikut contohnya: <div x-data="{ username: 'John Doe' }"> <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Angel" alt="avatar" width="30" /> <span>Username <span x-text="username"></span> </span> </div> Akan didapatkan: Perhatikan pada kode tersebut kita menggunakan 2 directive yang disediakan oleh Alpine JS yaitu x-data dan x-text. x-data merupakan sebuah directive yang berfungsi untuk menampung semua data dan logic yang akan digunakan. x-text merupakan directive yang berfungsi untuk mencetak atau mengeluarkan nilai yang terdapat pada blok kode x-data, hal ini mirip seperti console.log pada Javascript hanya saja kita mencetak nilainya langsung pada file HTML kita. b. Event / x-on Click Event click merupakan salah satu event atau peristiwa yang terjadi ketika user melakukan ‘click’ terhadap elemen HTML. Apabila kamu ingin menerapkan event tersebut, kamu bisa memanfaatkan directive x-on:click atau @click yang sudah disediakan oleh Alpine JS. Contoh penggunaan event Click ini bisa sering kita temukan seperti dropdown item; <div x-data="{ open: false }" x-on:click.outside="open = false" class="flex flex-col justify-center items-center"> <button x-on:click="open = !open" class="py-1 px-8 rounded-md bg-white text-black box-shadow mb-3"> Options <i class="fa-solid fa-chevron-down"></i> </button> <ul x-show="open" class="box-shadow rounded-md bg-white"> <li class="rounded-md py-2 px-7"><a href="#">New Task</a></li> <li class="rounded-md py-2 px-7"><a href="#">Edit Task</a></li> <li class="rounded-md py-2 px-7"><a href="#" class="text-red-600">Delete Task</a></li> </ul> </div> Show x-show merupakan directive yang disediakan oleh Alpine JS yang berfungsi untuk memunculkan dan menyembunyikan suatu elemen HTML. <div x-data="{ isOpen: false }"> <button x-on:click="isOpen = !isOpen" class="py-2 px-6 rounded-md border">Click Me</button> <div x-show="isOpen" class="mt-4 border rounded-md p-4 bg-gray-200"> <p>Ini adalah konten yang muncul saat tombol diklik.</p> </div> </div> Apabila button tersebut di-klik akan didapatkan: Keyup / Keydown Pernahkah kamu ketika mengisi form dan ketika selesai mengisi semua input lalu menekan tombol enter maka form tersebut langsung terkirim? Yup, hal tersebut merupakan implementasi yang dapat kita terapkan untuk mempermudah user melakukan sebuah task. Ketika menggunakan Alpine JS, kita bisa menerapkan hal demikian dengan menggunakan directive bernama x-on:keyup atau x-on:keydown. Sebagai contoh di atas, maka bisa kita terapkan: <div class="flex justify-center items-center"> <form x-data="" x-on:submit.prevent="alert('Submitted')" action="/foo" method="post"> <input type="text" name="" placeholder="Search" id="" class="py-2 px-6 rounded-md box-shadow" /> <button type="submit" class="py-2 px-6 rounded-md border">Search</button> </form> </div> Berikut ini beberapa event keyboard yang sering dijumpai ModifierKeyboard Key.shiftShift.enterEnter.spaceSpace.ctrlCtrl.cmdCmd.metaCmd on Mac, Windows key on Windows.altAlt.up .down .left .rightUp/Down/Left/Right arrows.escapeEscape.tabTab.caps-lockCaps Lock.equalEqual, =.periodPeriod, ..slashForward Slash, / C. Logic Perulangan Kita bisa menerapkan proses perulangan langsung pada file HTML ketika menggunakan Alpine JS, seperti setelah melakukan data fetching dan lain-lain. Untuk melakukan proses perulangan, Alpine JS menyediakan directive bernama x-for, Berikut contoh implementasinya: <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }" class="list-decimal"> <template x-for="color in colors"> <li x-text="color"></li> </template> </ul> Akan didapatkan: Terlihat pada kode tersebut kita menggunakan tag template ketika menggunakan perulangan pada Alpine JS, hal ini bertujuan untuk mencegah konten didalamnya ditampilkan kepada user sebelum halaman tersebut di load secara keseluruhan. Kemudian perlu diperhatikan yaitu ketika menggunakan tag template pada perulangan x-for dalam Alpine JS, ia hanya menerima satu root elemen, untuk lebih jelasnya seperti ini: Kode di bawah ini tidak akan bekerja: <template x-for="color in colors"> <span>The next color is </span><span x-text="color"> </template> Namun kode ini akan bekerja: <template x-for="color in colors"> <p> <span>The next color is </span><span x-text="color"> </p> </template> Percabangan Percabangan atau pengkondisian pada Alpine JS bisa kita terapkan dengan menggunakan directive bernama x-if. Berikut ini contoh implementasi sederhananya: <div x-data="{ login: false }"> <!-- Jika variabel login bernilai False --> <template x-if="!login"> <ul class="flex items-center gap-2"> <li>Login</li> <li> <button class="py-2 px-5 rounded-md bg-teal-400 text-white">Register</button> </li> </ul> </template> <!-- Jika variabel login bernilai True--> <template x-if="login"> <ul class="flex items-center gap-2"> <li class="flex items-center gap-2"> <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Angel" alt="avatar" width="30" /> <span class="font-bold">John Doe</span> <i class="fa-solid fa-chevron-down"></i> </li> </ul> </template> </div> Maka apabila variabel login bernilai True, akan didapatkan tampilan seperti ini: Jika bernilai False, maka: Kesimpulan Bagaimana menurut kamu? Cukup sederhana dan mudah di implementasi bukan? Alpine JS merupakan sebuah terobosan baru untuk membangun sebuah interaktif website tanpa harus menggunakan framework besar seperti React atau Vue. Bagi kamu yang ingin mempelajari lebih lanjut dunia web development, saya rekomendasikan untuk bergabung pada kelas premium yang disediakan oleh BuildWithAngga. Ketika bergabung kamu akan mempelajari mulai dari basic hingga studi kasus pengembangan website yang berstandar industri. Tunggu apalagi dan sampai jumpa di kelas👋

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

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

Pada artikel kali ini kita akan menerapkan studi kasus dengan membuat elemen card sederhana setelah Berkenalan Dengan SCSS dan SASS dan bagaimana Menggunakan SCSS/SASS pada file HTML. Persiapan Kita akan membuat project ini dengan menggunakan Vs Code. Apabila kamu belum menginstallnya maka bisa men-download disini. Lalu untuk referensi design akan menggunakan dari link figma community disini. Let’s Code 1. Untuk menyamakan project yang akan dibangun, silakan kamu ikuti pembuatan struktur folder dan file berikut: Untuk file image bisa kamu ganti dengan sesuai yang kamu inginkan. Apabila ingin sama persis silakan download image tersebut pada link figma community sebelumnya. 2. Kemudian pastikan sudah menginstall extension Live Sass Compiler pada Vs Code kamu karena kita akan melakukan kompilasi/perubahan dari file SCSS ke format CSS dengan menggunakan extension ini. 3. Lalu pada file index.html, silakan buat struktur HTML berikut: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar Elemen Card Dengan SCSS</title> <!-- Font Inter --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" /> <!-- CSS hasil kompilasi --> <link rel="stylesheet" href="./scss/style.css" /> </head> <body> <div class="card"> <div class="card-image"> <img src="./image/image.png" alt="Card Image" /> </div> <div class="card-body"> <div class="card-body-title">Headline</div> <p> Write an amazing description in this dedicated card section. Each word counts. </p> </div> <div class="card-footer"> <button>See More</button> </div> </div> </body> </html> Apabila kita buka file tersebut ke browser akan didapatkan: Masih belum nyaman dilihat bukan, maka pada langkah selanjutnya mari kita proses styling elemen tersebut🖌 Styling It Setelah membuat struktur HTML, silakan kamu buka file style.scss nya dan ikuti langkah di bawah. 1. Buka file style.scss kamu, dan klik tanda Watch SASS, pada bagian bawah bar Vs Code Jika sudah maka akan muncul 2 buah file sebagai berikut: Maka sampai sini kamu sudah berhasil melakukan proses kompilasi dari file SCSS ke file CSS. 2. Persiapkan Variabel Color dan Font Weight Pada langkah ini kita mempersiapkan variabel yang akan digunakan pada elemen card tersebut: // Color Variabel $background-color: #e5e5e5; $gray: #425466; $purple: #4c6fff; // Font Weight $regular: 400; $semi-bold: 600; 3. Lakukan persiapan styling pada background dan semua elemen // Global * { box-sizing: border-box; } // Styling Body body { background-color: $background-color; } Pada kode tersebut terdapat selector universal yaitu *, selector tersebut akan memengaruhi semua elemen di dalam halaman file HTML dan didalamnya terdapat aturan yaitu penggunaan box-sizing: border-box; untuk memastikan bahwa lebar dan tinggi elemen mencakup padding dan border, bukan hanya content di dalamnya. 4. Styling Elemen Card .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; ... } Kode tersebut merupakan aturan standar pada CSS yang dapat digunakan untuk menerapkan styling pada elemen card. Maka apabila kita buka file HTML tersebut kedalam browser didapatkan: Sudah mulai terlihat design nya bukan? Lalu coba kamu perhatikan kode HTML card sebelumnya: <div class="card"> <div class="card-image"> <img src="./image/image.png" alt="Card Image" /> </div> <div class="card-body"> <div class="card-body-title">Headline</div> <p> Write an amazing description in this dedicated card section. Each word counts. </p> </div> <div class="card-footer"> <button>See More</button> </div> </div> Terlihat pada elemen card tersebut memiliki children/items di dalamnya, maka dengan ini bisa kita manfaatkan fitur ajaib dari SCSS yaitu Nesting. 5. Proses styling dengan fitur Nesting Untuk melakukan styling pada class .card-image maka dengan menggunakan SCSS dapat dilakukan sebagai berikut: .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; // Manfaatkan fitur nesting pada SCSS // &-image = card-image , karena berada dalam satu elemen dengan parent yang sama &-image { width: 100%; } ... } Tanda & dalam kode SCSS digunakan untuk merujuk pada "parent selector". Hal ini memungkinkan kamu untuk menyatukan selector parent dengan selector children untuk modifikasi di dalam file SCSS. Jadi ketika file SCSS di compile, maka tanda &-image akan menjadi .card-image. Mulai paham kan? Mari kita manfaatkan fitur ini untuk bagian .card-body dan .card-footer maka implementasinya: // Styling Card .card { ... &-body { margin: 24px; &-title { font-weight: $semi-bold; } p { color: $gray; font-size: 14px; } } &-footer { margin: 24px; button { width: 95px; height: 36px; border-radius: 10px; background-color: $purple; border: none; color: white; } } } Hingga didapatkan kode lengkap style.scss sebagai berikut: // Color Variabel $background-color: #e5e5e5; $gray: #425466; $purple: #4c6fff; // Font Weight $regular: 400; $semi-bold: 600; // Global * { box-sizing: border-box; } // Styling Body body { background-color: $background-color; } // Styling Card .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; // Manfaatkan fitur nesting pada SCSS &-image { width: 100%; } &-body { margin: 24px; &-title { font-weight: $semi-bold; } p { color: $gray; font-size: 14px; } } &-footer { margin: 24px; button { width: 95px; height: 36px; border-radius: 10px; background-color: $purple; border: none; color: white; } } } Lalu apabila kamu cek file style.css hasil kompilasi file SCSS tersebut, didapatkan: * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { background-color: #e5e5e5; } .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; } .card-image { width: 100%; } .card-body { margin: 24px; } .card-body-title { font-weight: 600; } .card-body p { color: #425466; font-size: 14px; } .card-footer { margin: 24px; } .card-footer button { width: 95px; height: 36px; border-radius: 10px; background-color: #4c6fff; border: none; color: white; }/*# sourceMappingURL=style.css.map */ Terlihat extension tersebut sudah berhasil melakukan proses kompilasi dan apabila kita buka file HTML pada browser didapatkan hasil berikut: Taraa✨, selamat kamu sudah berhasil membuat elemen card sederhana menggunakan SCSS. Kesimpulan Sampai sini mulai seru bukan menggunakan SCSS? Maka saran saya kamu harus lebih banyak melakukan studi kasus berbeda agar lebih terbiasa dalam menggunakan fitur-fitur yang disediakan oleh SCSS ini. Oiya saya juga menyarankan apabila kamu ingin lebih expert dalam bidang web development, bisa bergabung pada kelas-kelas yang disediakan oleh BuildWithAngga. Kamu bisa mengakses nya secara gratis disini dan apabila ingin memperdalam lebih lanjut silakan bergabung pada kelas pro yang sudah disediakan. Tunggu apalagi dan saya tunggu kamu dikelas yaa😍

Secara default browser yang kita gunakan hanya mensupport proses styling menggunakan CSS saja. Maka dari itu setelah kita belajar Berkenalan Dengan SCSS/SASS, langkah selanjutnya ialah kita akan melakukan kompilasi atau merubah file SCSS tersebut menjadi file CSS agar bisa digunakan oleh browser. 1. Menggunakan Extension Jika kamu menggunakan VS Code, maka kamu bisa langsung melakukan proses kompilasi dengan menginstal extension yang sudah disediakan yaitu: Live Sass Compiler Kemudian buka file SCSS/SASS kamu, lalu perhatikan pada pojok bawah kanan pada tampilan VS Code akan terlihat button bernama Watch SASS. Tinggal kamu klik button tersebut maka secara otomatis extension ini akan melakukan proses kompilasi file SCSS/SASS menjadi file CSS. Setelah berhasil akan dihasilkan file berikut: Kamu perlu menggunakan file bernama style.css saja karena file lainnya hanya berfungsi untuk melakukan proses kompilasi ulang ketika terjadi perubahan pada file SCSS kamu. 2. Menggunakan Compiler Online Cara kedua yaitu kamu bisa menggunakan compiler online untuk merubah file SCSS menjadi CSS dengan cara mengunjungi website berikut: https://sass-lang.com/playground/ Maka kode SCSS kita sudah di kompilasi oleh website tersebut dan bisa langsung copy paste lalu kita gunakan pada file CSS kita. 3. Menggunakan Command Line Cara terakhir yaitu kita bisa menggunakan command line untuk melakukan proses kompilasi dengan instalasi library: sass npm install -g sass Kemudian lakukan proses watching yaitu agar proses compile file akan terus berjalan walau terjadi perubahan pada file SCSS tersebut. sass style.scss style.css Maka didapatkan file seperti ini: Dan apabila kita perhatikan, hasilnya sama seperti langkah nomor satu bukan? Karena behind the scene apa yang dilakukan pada langkah pertama dan ketiga adalah mereka melakukan proses kompilasi yang sama. Maka dari hasil kompilasi tersebut, kamu bisa menggunakan style.css sebagai file utama CSS yang akan digunakan pada HTML. Namun perlu diperhatikan ketika menggunakan command line pastikan pada device kamu sudah terpasang aplikasi NodeJS, dan jika belum kamu bisa mendownload nya disini: https://nodejs.org/en Kesimpulan Selamat, sampai disini kamu telah berhasil menggunakan file SCSS/SASS kedalam file HTML. Langkah selanjutnya ialah kamu tetap perlu mengembangkan skill styling web development agar dapat menghasilkan website yang eye catching dan nyaman digunakan oleh pengguna. Berbicara tentang website, pada BuildWithAngga terdapat kelas yang dapat digunakan untuk membantu dan mendukung perkembangan skill web development. Kamu bisa akses kelas tersebut secara gratis disini atau jika ingin memperdalam lebih lanjut kamu bisa bergabung pada kelas premium yang disediakan BuildWithAngga. Tunggu apalagi ayo bergabung dan sampai jumpa dikelas!