Tips All

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!

SCSS atau SASS merupakan singkatan dari Syntactically Awesome Stylesheets yang merupakan preprocessor dari CSS. Ketika menggunakan preprocessor kita dapat memiliki keleluasaan lebih dalam melakukan proses styling seperti pembuatan variabel, nesting, partials, mixins dan lain-lain yang tentu tidak bisa dilakukan oleh CSS biasa. Perbedaan antara SCSS dan SASS Terdapat dua cara dalam apabila ingin menggunakan SCSS atau SASS, yaitu: 1. SCSS Apabila ingin menggunakan SCSS, maka kita perlu membuat sebuah file dengan berekstensikan .scss. Dan untuk penulisan sintaks-nya sama seperti CSS native pada umumnya. .container { max-width: 576px; margin: auto; } .button { padding: 10px; border-radius: 2px; border: 1px solid black; } 2. SASS Kemudian apabila ingin menggunakan SASS, kita perlu membuat file tersebut dengan berekstensikan .sass. Perbedaan antara SCSS dan SASS terletak pada penulisannya. Untuk SCSS menggunakan kurung kurawal seperti CSS pada umumnya, sedangkan untuk SASS menggunakan identasi seperti python dalam penulisannya. .container max-width: 576px; margin: auto; .button padding: 10px; border-radius: 2px; border: 1px solid black; Fitur Yang Dimiliki Berikut ini beberapa fitur dari SCSS/SASS yang dapat kita manfaatkan: 1. Variabel Apabila ingin membuat variabel dalam SCSS dapat dilakukan dengan cara seperti ini: $red-100: #fee2e2; $red-200: #fecaca; $red-300: #fca5a5; $red-400: #f87171; Kemudian penggunaannya: button{ background-color: $red-300; } Dan perlu diingat dalam membuat variabel, kamu harus membuatnya dengan menggunakan tanda $ kemudian diikuti dengan nama variabel nya lalu ditutup dengan titik koma. 2. Nesting Kemudian terdapat fitur Nesting, yaitu memungkinkan kita melakukan grouping dalam proses styling. Berikut contoh penggunaan nesting untuk membuat navbar sederhana: index.html <nav> <ul> <li> <a href="">Dashboard</a> </li> <li> <a href="">Profile</a> </li> </ul> </nav> Maka apabila menggunakan SCSS didapatkan: SCSS nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } Terlihat pada file CSS tersebut, kita melakukan proses pemanggilan berulang pada kata kunci nav, sedangkan ketika menggunakan SCSS dapat dengan melakukan proses grouping sehingga tidak perlu memanggil kata kunci tersebut. Tentu saja hal ini menghasilkan kode yang nyaman dibaca. Perlu diingat ketika menggunakan fitur nesting pastikan elemen children di bawahnya masih dalam satu lingkup yang sama. 3. Partials / Modules Menganut prinsip Separate of Concern, kita dapat membuat sebuah module atau file SCSS terpisah untuk setiap bagian elemen HTML. Untuk membuat module pada SCSS, perlu menambahkan tanda underscore lalu diikuti dengan nama file tersebut. Sebagai contoh: _navbar.scss // _navbar.scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } style.scss // style.scss @use "navbar"; .container { max-width: 576px; margin: auto; } Terlihat pada kode di atas apabila ingin menggunakan module, maka dapat memanggilnya dengan kata kunci @use, dan pastikan file tersebut masih berada dalam satu folder yang sama. Apabila terdapat perbedaan hierarki pada file tersebut, maka relative path berlaku seperti CSS pada umumnya. 4. Mixins Mixin memungkinkan kita membuat sebuah block styling yang dapat digunakan secara berulang pada satu elemen dan elemen lainnya. Berikut ini contohnya: SCSS @mixin button($theme:red) { background-color: ($theme); padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } .button-info { @include button('blue'); } .button-danger{ @include button('red'); } CSS .button-info { background-color: "blue"; padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } .button-danger { background-color: "red"; padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } Pada kode di atas hanya perlu membuat satu block khusus yang memuat segala proses styling yang akan digunakan, lalu memanggil block tersebut dengan kata kunci @include pada elemen yang ingin diterapkan. Dengan menggunakan mixin memungkinkan kita menyisipkan sebuah parameter, sehingga membuatnya unik satu sama yang lain. Hal ini mirip seperti function dalam bahasa pemrograman pada umumnya. 5. Extended / Inheritance Sama seperti mixin, kita dapat membuat sebuah block khusus yang menyimpan property dan value css yang dapat digunakan secara berulang. Namun terdapat perbedaannya dalam penggunaannya, perhatikan kode berikut: // Membuat parent yang berisikan property dan value CSS %button { padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } // Digunakan dalam variant button .button-danger { @extend %button; background-color: red; } .button-success { @extend %button; background-color: green; } Perbedaan antara mixin dan sifat pewarisan yaitu, apabila menggunakan mixin maka kita perlu membuat sebuah parameter di dalamnya agar menjadikan elemen tersebut dinamis. Sedangkan untuk pewarisan sifat hanya menurunkan property dan value dari block styling tersebut terhadap elemen lainnya tanpa dapat menyisipkan parameter di dalamnya. 6. Operator Apabila ingin menggunakan operator seperti +, -, , math.div(), dan %, maka kita perlu menyisipkan kode seperti di bawah ini: SCSS **@use "sass:math";** .container { display: flex; } article[role="main"] { width: math.div(600px, 960px) * 100%; } aside[role="complementary"] { width: math.div(300px, 960px) * 100%; margin-left: auto; } SCSS .container { display: flex; } article[role=main] { width: 62.5%; } aside[role=complementary] { width: 31.25%; margin-left: auto; } Terlihat pada kode SCSS di atas, kita memanggil salah satu module bawaan dari SCSS yaitu use:math, maka dengan ini bisa menerapkan fungsi matematika dalam proses styling yang akan diterapkan. Kesimpulan Mulai tertarik menggunakan preprocessor CSS ini? Tentu saja untuk dapat menggunakannya kita hanya perlu memahami dasar-dasar CSS agar bisa diterapkan pada project yang akan dibangun. Dan kamu perlu memperbanyak latihan agar lebih terbiasa dengan fitur-fitur yang disediakan oleh preprocessor ini. Apabila kamu tertarik dan ingin belajar lebih lanjut tentang web development, saya merekomendasikan untuk bergabung pada kelas gratis di BuildWithAngga, karena di dalamnya terdapat mentor-mentor berkualitas yang mendukung proses belajar hingga menjadikan kita sebagai developer yang dapat bersaing dalam dunia industri. Semoga beruntung dan sampai jumpa di kelas!

Tailwind merupakan framework css yang berbasis utility yang di desain untuk mempermudah dan mempercepat pembuatan aplikasi dengan menggunakan desain yang customizable. Karena berbasis utility maka kita harus melakukan proses slicing komponen yang akan dibentuk dengan memasukkan class nya satu persatu hingga membentuk suatu kesatuan elemen. Mungkin terdengar rumit ya? Tenang saja tidak se-rumit itu kok, bahkan hampir seluruh proyek besar industri semuanya menggunakan Tailwind sebagai base styling mereka. Mari kita bahas utility apa saja yang akan sering kita temui ketika menggunakan framework satu ini. 1. Container Container dalam Tailwind CSS merupakan sebuah pembungkus atau wrapper semua item di dalamnya, sehingga terlihat lebih rapi dan ter kelompok. Apabila kita ingin menggunakan container pada Tailwind, kita bisa menggunakan utility bernama container. Berikut implementasinya: <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> Dan apabila kamu ingin membuat sebuah container berada persis dalam tengah halaman, kita bisa menambahkan salah satu utility lagi yaitu mx-auto. Maka implementasinya: <div class="container mx-auto flex"> <div class="w-1/2 h-52 bg-red-100">Left Side</div> <div class="w-1/2 h-52 bg-orange-100">Right Side</div> </div> Didapatkan hasil: Untuk lebih jelasnya silakan kamu baca dokumentasinya di sini: Tailwind CSS - Container 2. Padding Padding merupakan ruang antar content dan border pada suatu elemen. Ketika menggunakan Tailwind kita dapat dengan mudah menerapkan padding dengan memanggil utility nya yaitu p-[value]. Berikut implementasinya: <button class="p-10">Some Button<button> Semakin besar nilai yang kita berikan maka semakin luas pula padding yang dihasilkan. Untuk nilai yang bisa kita gunakan ke dalam padding tersebut bisa kamu cek di sini: Tailwind CSS - Padding 3. Margin Berbeda dengan padding yang merupakan ruang antara content dan border, margin adalah kebalikannya. Margin merupakan jarak antara satu elemen terhadap elemen HTML lainnya. Ketika kita menggunakan Tailwind, kita dapat menerapkan jarak antar elemen dengan memanggil utility yaitu m-[value]. Berikut implementasinya: <div class="m-10">Some Content</div> Nilai yang bisa kita berikan kepada margin hampir sama seperti padding; semakin besar nilai yang kita berikan, maka semakin lebar pula jarak antar elemen tersebut. Untuk lebih jelasnya silakan kamu cek dokumentasi berikut: Tailwind CSS - Margin 4. Grid Grid merupakan salah satu property pada CSS yang bertujuan untuk mempermudah melakukan proses layouting. Tailwind memiliki utility bernama grid untuk memberikan sifat grid terhadap elemen yang ingin kita terapkan. Berikut implementasinya: <div class="grid"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Perlu diingat apabila kamu ingin menggunakan grid untuk proses layout nya, maka kamu juga harus paham seperti bagaimana membuat kolom dan baris pada grid system. Tailwind sendiri memiliki utility untuk mengatur baris pada elemen yang menggunakan grid layout yang bernama grid-rows-[value]. <div class="grid grid-rows-2"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Kemudian apabila kamu ingin mengatur kolom pada elemen yang menggunakan grid layout kita bisa menggunakan utility grid-cols-[value]. <div class="grid grid-rows-2 grid-cols-2"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Dan untuk mengatur jarak antar items di dalam container, kita bisa menggunakan utility bernama gap. Hingga di dapatkan hasil akhir seperti ini: <div class="grid grid-rows-2 grid-cols-2 gap-5"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Untuk lebih jelasnya mari kita lihat dokumentasi resmi nya di sini: Tailwind CSS - Grid Columns. , Tailwind CSS - Grid Rows. dan Tailwind CSS - Gap. 5. Flexbox Sama seperti grid, Flex atau Flexbox merupakan salah satu property CSS yang bertujuan untuk mempermudah proses layouting. Kita bisa menerapkan sifat flex terhadap elemen yang ingin kita terapkan dengan menggunakan utility flex. <div class="flex"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Kita juga bisa terapkan gap pada flex container. Maka didapatkan hasil seperti ini: <div class="flex gap-5"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Maka kita sudah berhasil menerapkan sifat flex pada elemen div di atas. 6. Justify Content Justify Content merupakan property pada CSS yang berfungsi untuk mengatur tata letak item di dalam container flex atau grid secara horizontal. Kita bisa mengatur posisi item tersebut menggunakan utility Tailwind yang bernama justify-[value]. <div class="flex justify-center/evenly/between/end/start"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Untuk tahu detil nilai apa saja yang bisa kita terapkan, silakan kamu lihat dokumentasi: Tailwind CSS - Justify Content 7. Align Items Berbeda dengan Justify Content yang mengatur item secara horizontal, Align Items mengatur item secara vertikal baik itu di dalam container flex atau pun grid. Kita bisa menggunakan align items pada Tailwind dengan cara sebagai berikut: <div class="flex items-start/end/center/baseline/stretch"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Untuk lebih jelasnya silakan kamu lihat dokumentasi di sini: Tailwind CSS - Align Items 8. Border Radius Border radius merupakan property CSS yang mengatur sudut lengkung pada suatu elemen. Tailwind menyediakan utility bernama rounded agar kita bisa mengatur seberapa besar lengkungan sudut yang akan diberikan pada elemen tersebut. Contoh implementasinya sebagai berikut: <button class="py-2 px-10 rounded-lg border border-2 border-green-400 bg-green-100 text-green-700 shadow-md">Success</button> 9. Color Berterimakasihlah kita kepada developer Tailwind CSS, karena mereka sudah menyediakan banyak color palette yang bisa kita gunakan secara gratis dan mudah digunakan. Lalu bagaimana cara menggunakan color palette tersebut terhadap elemen kita? Berikut implementasi penggunaannya: Background Color Apabila kita ingin memberikan warna terhadap background, maka kita bisa mengimplementasikan seperti ini: <div class="py-2 px-6 rounded-md bg-purple-100">Some Case</div> Text Color Apabila ingin memberikan warna terhadap text maka: <div class="py-2 px-6 rounded-md bg-purple-100 text-purple-600">Some Case</div> Border Color Kemudian apabila kita ingin memberikan warna pada border, kita bisa melakukannya seperti ini: <div class="py-2 px-6 rounded-md bg-purple-100 text-purple-600 border border-purple-600">Some Case</div> Maka di dapatkan hasil seperti ini: 10. Responsive Utility Last but not least, responsive utility bertanggung jawab untuk menjadikan elemen yang kita miliki mempunyai sifat responsive, yaitu dapat diposisikan nya elemen sesuai dengan lebar layar device yang digunakan. Hal ini juga sangat penting karena pada saat kita menggunakan Tailwind CSS secara tidak langsung kita harus mengikuti prinsip mobile-first design, yaitu di mana kita harus melakukan proses slicing design untuk ukuran mobile terlebih dahulu kemudian ukuran tablet dan seterusnya. Berikut responsive utility yang disediakan: Breakpoints PrefixMinimum WidthCSSsm640px@media (min-width: 640px) { ... }md768px@media (min-width: 768px) { ... }lg1024px@media (min-width: 1024px) { ... }xl1280px@media (min-width: 1280px) { ... }2xl1536px@media (min-width: 1536px) { ... } Sekarang perhatikan kode di bawah ini: <div class="bg-red-100 p-3 rounded-xl sm:bg-purple-100 md:bg-orange-100 lg:bg-violet-100"> <div class="text-center"> <h1 class="block sm:hidden font-bold">Teks ini muncul hanya pada ukuran mobile</h1> <h1 class="hidden sm:block md:hidden font-bold">Teks ini muncul hanya pada ukuran tablet</h1> <h1 class="hidden md:block lg:hidden font-bold">Teks ini muncul hanya pada ukuran laptop</h1> <h1 class="hidden lg:block font-bold">Teks ini muncul hanya pada ukuran desktop</h1> </div> <div class="py-4 px-10 border rounded-md flex justify-evenly items-start gap-x-4 bg-gray-50 shadow-md"> <img src="<https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Cookie>" alt="avatar" class="w-10 rounded-full mb-3" /> <div class=""> <h1 class="font-bold">John Doe</h1> <p class="text-gray-500 font-mono">Front End Developer</p> </div> </div> </div> Mari kita analisis: Pada layar mobile elemen tersebut memiliki background berwarna merah dan text yang muncul yaitu ukuran mobile.Kemudian saat layar memiliki lebar minimal sebesar 640px maka background berganti berwarna purple dan text yang muncul yaitu ukuran tablet.Saat layar memiliki lebar minimal 768px maka background berganti berwarna orange dan text yang muncul yaitu ukuran laptop.Lalu demikian juga saat layar memiliki minimal lebar 1024px maka background berganti berwarna violet dan text yang muncul yaitu ukuran desktop. Kesimpulan Well, setelah mengetahui utility-utility apa saja yang akan sering digunakan ketika menggunakan Tailwind CSS, maka dapat kita ambil kesimpulan: Tailwind merupakan framework CSS yang menyediakan utility-utility yang berguna untuk memproses styling pada elemen HTML dengan mudah dan easy to customize.Untuk membuat sebuah wrapper dan membuatnya rata kanan kiri, kamu bisa menggunakan container sebagai pembungkusnya.Ingin melakukan proses layouting? Kamu bisa menggunakan utility flex atau grid untuk mencapai hal tersebut.Bingung dengan responsive design? Tenang Tailwind menyediakan responsive utility yang dapat kita gunakan untuk menyesuaikan posisi elemen HTML kita sesuai dengan lebar layar yang digunakan. Tentunya dengan mempelajari Tailwind CSS kamu akan mendapatkan flexibility dan kemudahan melakukan customization dalam proyek yang akan dibangun. Dan apabila kamu ingin mempelajari lebih lanjut Tailwind CSS, kamu bisa mengunjungi kelas gratis yang disediakan BuldWithAngga. Sekian artikel kali ini dan sampai jumpa dalam artikel selanjutnya.

Dalam dunia desain UI/UX yang terus berkembang ini, kreativitas dan efisiensi menjadi kunci utama bagi para desainer lhoo! Salah satu tool yang muncul sebagai cheatsheet bagi para UI/UX designer adalah ChatGPT, sebuah model bahasa buatan OpenAI yang membawa perubahan dalam cara kita berinteraksi dengan teknologi. Kali ini, kita akan membahas bagaimana penggunaan ChatGPT dapat meningkatkan produktivitas dan kreativitas para desainer, serta memberikan beberapa contoh prompts yang dapat diimplementasikan. Sekarang, mari kita bahas dulu keunggulan menggunakan ChatpGPT dalam proses pembuatan UI/UX design ;) Proses Menemukan Ide atau Ideation yang Cepat: Dengan menggunakan ChatGPT, para desainer dapat dengan cepat menghasilkan ide-ide baru untuk project mereka. Contoh prompt seperti "Berikan saya ide untuk layout halaman utama aplikasi e-commerce yang inovatif" dapat membuka kerativitas gagasan-gagasan segar dan unik.Feedback Instan: Mendapatkan feedback segera merupakan bagian “krusial” dalam pembuatan desain. Dengan ChatGPT, kamu dapat meminta pendapat tentang desainmu atau bahkan memeriksa potensi masalah dalam interface dengan cepat. Misalnya, "Berikan feedback tentang navigasi pada halaman produk" dapat menghasilkan pemikiran instant dari perspektif pengguna juga 😊Penanganan Pertanyaan User: Desainer dapat menggunakan ChatGPT untuk ‘menebak” pertanyaan yang mungkin ditanyakan oleh user terkait dengan interface yang kamu desain. Contoh prompt seperti "Bagaimana cara menjelaskan fitur pencarian yang efektif kepada pengguna?" dapat membantu desainer mempersiapkan jawaban yang intuitif dan informatif.User Persona: Mengetahui audiens target adalah kunci dalam desain yang berhasil. ChatGPT dapat membantu desainer dalam merinci karakteristik dan preferensi pengguna yang potensial dengan menggunakan prompt seperti "Buatlah profil pengguna untuk aplikasi mobile untuk penggemar musik." Nah mari kita simak bagaimana ChatGPT membantu proses para UI/UX designer! Membuat UserFlow Mengandalkan ChatGPT untuk membuat userflow UI/UX dengan cepat. Desainer dapat membayangkan ide-ide seketika, menguji konsep dengan mendapatkan feedback instan, dan merancang userflow yang responsif terhadap berbagai skenario user. Dengan kemampuan generatif ChatGPT, proses perancangan userflow menjadi lebih efisien dan kreatif. Checklist untuk UI Design Menggunakan ChatGPT saat membuat checklist UI elements, kamu akan merasakan keuntungan signifikan dalam efisiensi dan kecepatan dalam proses perancangan. Dengan ChatGPT dan pertanyaan atau instruksi yang tepat, desainer dapat dengan cepat mendapatkan panduan yang relevan dan menyeluruh untuk melengkapi checklist. Menentukan Warna yang Tepat Saat kamu menggunakan ChatGPT untuk meminta saran warna dalam desain, cara ini merupakan jalur yang cepat dan inspiratif. Dengan menggunakan ChatGPT dengan pertanyaan seperti "Sarankan kombinasi warna yang cocok untuk UI Travel app," kamu sebagai desainer akan mendapatkan rekomendasi secara instan. Design System Dengan memanfaatkan ChatGPT, desainer dapat meminta panduan dan rekomendasi terkait berbagai elemen desain dalam aplikasi travel tersebut lhoo. Berikut adalah deskripsi singkat penggunaan ChatGPT dalam pembuatan design system: Ideation yang Cepat ChatGPT memungkinkan desainer untuk dengan cepat menemukan ide-ide baru terkait warna, tipografi, ikon, dan elemen desain lainnya untuk aplikasi travel-mu. Pertanyaan seperti "Sarankan tema warna yang sesuai untuk aplikasi travel" dapat memberikan inspirasi untuk warna yang akan digunakan loh!Design yang Konsisten Dengan ChatGPT, kamu dapat meminta panduan tentang pemilihan warna, gaya tipografi, dan layout yang konsisten di seluruh aplikasi.Penggunaan Design Tokens Lalu ChatGPT dapat membantu dalam merinci Design Tokens, seperti pemilihan font, warna, dan ukuran, untuk setiap elemen desain. Hal ini memudahkan dokumentasi dan implementasi konsisten di seluruh aplikasi. Membuat User Persona ChatGPT memberikan kemampuan untuk merinci faktor-faktor seperti usia, pekerjaan, minat, dan tantangan pengguna potensial. Dengan memanfaatkan ChatGPT, kamu dapat memperoleh wawasan yang mendalam, mempercepat proses pengembangan User Persona, dan mendapatkan perspektif yang beragam! Pertanyaan-pertanyaan UX Interview Memakai ChatGPT dengan prompt seperti "Bantu saya merancang pertanyaan UX interview untuk sebuah aplikasi travel," desainer dapat menerima pertanyaan yang fokus pada pengalaman pengguna dan kebutuhan pengguna potensial. Keuntungannya antara lain seperti menghemat waktu dalam proses perencanaan wawancara, variasi pertanyaan yang lebih kreatif, dan kemampuan untuk menangkap berbagai aspek pengalaman pengguna. Dengan menggunakan ChatGPT, kamu dapat mendapatkan pandangan yang lebih luas dan mendalam terkait aspek UX dari aplikasi travel 😊 Kesimpulan Dengan memanfaatkan ChatGPT, UI/UX designer dapat meningkatkan inovasi dan produktivitas mereka! Keunggulan dalam ideation yang cepat, feedback instan, penanganan pertanyaan user, dan pembuatan user persona membuat ChatGPT menjadi alat yang tak tergantikan dan dapat diandalkan dalam membantu desainer menuju interface yang lebih baik dan lebih memuaskan secara user experience! Tertarik menjadi UI/UX designer profesional? Kamu bisa mengikuti kelas-kelas gratis UI/UX di BuildWithAngga lho! Tunggu apalagi? Yuk kita asah design skill bersama ;)