Tips User-Interface

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

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

Hello people with the spirit of learning! 👋🏻 Di artikel kali ini, kita akan mempelajari langkah-langkah membuat UI design landing page untuk platform jual-beli mobil bekas. Kita akan membahas cara menciptakan tampilan yang menarik, merancang elemen-elemen kunci seperti hero section, galeri mobil, penampilan dealer mobil, beserta section penting lainnya. Ada beberapa alasan mengapa UI Design yang baik sangat penting untuk landing page jual-beli mobil bekas: Meningkatkan kepercayaan calon pembeliMemudahkan pengguna daam mencari mobil impian merekaMenonjolkan keunggulan platform kamu di pasar yang kompetitif Sebelum itu, kamu perlu tau dulu nih seperti apa tampilan dari landing pages yang akan kamu buat, dan kurang lebih seperti ini nih tampilannya: Sebelum itu, kamu perlu tau dulu nih seperti apa tampilan dari landing pages yang akan kamu buat, dan kurang lebih seperti ini nih tampilannya: Nah, gimana?, keren kan?, Sekarang mari kita mulai perjalanan desain kita untuk menciptakan landing page yang informatif, menarik, dan bermanfaat untuk pengguna, Let’s Gooooo! 🚗✨" 1. Buka Software atau Website Figma Karena kita menggunakan figma untuk membuat tampilan landing pages, kamu bisa buka dulu software figma-nya, atau kamu juga bisa akses melalui website figma ya!!!, dan dalam tutorial ini saya menggunakan figma yang versi website. Kemudian jangan lupa login menggunakan akun kamu, dan jika tidak punya akun, kamu bisa membuatnya dulu ya. Setelah berhasil login, kamu bisa langsung memilih New Design File untuk membuat file desain baru, yang nantinya akan kamu gunakan untuk membuat desainnya, dan tampilannya seperti ini nih: Setelah klik New Design File, nantinya kamu akan di arahkan ke halaman canvas baru kamu, dengan tampilan seperti ini: Dan, dijelaskan sedikit mengenai bagian yang saya highlight yaaa, supaya nantinya kamu sudah tau bagian mana yang nantinya akan digunakan: Toolbar: berisi tools yang bisa kamu gunakan untuk menambahkan elemen desain, contohnya: shape, frame, pen-tool, text, plugin, komentar, hand-tool. dan di dalamnya juga tampilkan short cut, apabila kamu malas bolak balik buka toolbarnya, dan berikut penjabarannya: Left Sidebar: berisi halaman, asset, dan identitas dari elemen, komponen, serta frame yang sudah kamu buat di dalam canvas, dan kamu bisa mengganti namanya sesuai yang kamu butuhkan, dan berikut penjabarannya: Right Sidebar: berisi editor yang berfungsi untuk merubah nilai dari elemen, serta frame yang sudah kamu buat di dalam canvas, serta ada bagian yang bernama Export yang bisa kamu gunakan untuk mendownload hasil desain kamu loh, dan berikut penjabarannya: Canvas: area yang bisa kamu gunakan untuk membuat desain, dan kamu bisa memanfaatkan toolbar untuk membuat elemen dan frame desain yang kamu inginkan, dan berikut penjabarannya: Nah, ketika kamu sudah mulai mendesain, maka contoh tampilan left sidebar, canvas, dan right sidebar akan jadi seperti ini nih: Setelah memahami bagian-bagian penting pada figma, selanjutnya, kamu sudah bisa untuk memulai membuat tampilan landing pages, pertama bisa dengan membuat bagian frame utama terlebih dulu di dalam canvas. 2. Bagian Frame Utama frame utama merupakan bagian yang sangat penting, karena berfungsi untuk menempatkan elemen, frame dan komponen yang akan kita buat nantinya (frame utama dalam keadaan kosong pada gambar), dan mari kita lanjut untuk membuat frame utama. 3. Cara Membuat Frame Utama Untuk membuat frame utama, kamu bisa menggunakan frame ukuran Macbook Air dan dapat ditambahkan dengan cara: Tekan tombol “F” pada keyboard, & jangan klik mouse kam, tapi langsung pilih opsi Macbook Air pada bagian Right Sidebar yang akan kamu jadikan sebagai frame utamaKemudian, select frame utama, lalu ubah:Width: 1280pxHeight: 5259pxBackground Fill: #FFFFFF Kemudian, kamu bisa gunakan layout grid columns, yang berfungsi memandu jarak di dalam frame, supaya nanti kamu bisa dengan mudah mengatur letak elemen, komponen, dan frame. dan kamu bisa menggunakan fitur ini dengan cara: Select frame utama, kemudian pada Right Sidebar pilih Layout GridLalu, klik icon “+”, kemudian ganti dari Grid menjadi ColumnsKemudian, ubah nilai di dalam Columns menjadi:Count: 12Margin: 64Gutter: 20Color Oppacity: 5% (apabila garisnya terlalu terang, bisa kamu turunkan lagi misalnya menjadi 3%) Setelah berhasil membuat frame utama, kamu sudah bisa memulai untuk membuat bagian-bagian dari landing pages nih, dan akan dimulai dari bagian Top Bar dulu ya. 4. Bagian Top Bar Bagian Top Bar berada di posisi paling atas di frame utama, dan berfungsi sebagai alat navigasi pengguna di dalam website jual beli mobil bekas, yang berisi Logo, Menu Navigasi, Tombol Sign in, dan Tombol Get Started, nah maka dari itu bagian ini sangat penting banget guysss. Tapi, sebelumnya kita perlu membuat Top Bar Area dulu nih, karena akan berfungsi sebagai wadah dari elemen, serta komponen Top Bar nanti, dan mari kita lanjut untuk membuat Top Bar Area. 5. Cara Membuat Top Bar Area Untuk membuat Top Bar, kamu bisa membuat *frame *****terlebih dahulu, dengan cara: Tekan key “F” pada keyboard, dan tempatkan ke dalam frame utama, dan tambahkan warna Background Fill= #1A1C21.Ubah width dari frame tersebut menjadi 1280px, sama seperti frame utama.Ubah height dari frame tersebut menjadi 125px 6. Cara Membuat Elemen, dan Komponen Di Dalam Top Bar Area Di dalam Top Bar Area, perlu kamu tambahkan elemen serta komponen penting, yang nantinya bisa memudahkan pengguna bernavigasi di dalam website ini, dan antara lain seperti Logo, Menu Navigasi, Tombol Sign in, dan Tombol Get Started. Cara Membuat Logo: Untuk logo Landing Page, kamu bisa membuat komponen ini dengan cara:Ketik huruf “S”: Inter, black, dan 36px.Klik kanan pada text tersebut, kemudian pilih frame selection.Ubah width, dan height dari frame tersebut menjadi 44px.Tambahkan fill background pada frame tersebut, dan ubah menjadi linear, dengan:stops 0% - #588CF3, Oppacity= 100%,stops 100% - #115BEE, Oppacity= 100%.Ubah border radius frame tersebut menjadi 12px. Lalu, letakan logo di dalam top bar area, dengan jarak sisi kiri sebesar 62px. Cara Membuat Menu Navigasi: Untuk membuat Menu Navigasi, kamu bisa membuat komponen ini dengan cara:Ketikan “Home”: Inter, black, dan 16px.Klik text “Home” tersebut, dan aktifkan auto layout, tekan Shift + A pada keyboard untuk aktifkan auto layout-nya. Dengan begitu, text “Home” akan memiliki auto layout, pastikan memiliki:Horizontal Padding= 8pxVertical Padding= 8pxKlik text “Home” tersebut, kemudian tekan CTRL + D pada keyboard untuk copy-paste secara langsung text tersebut, lakukan sebanyak 2 kali, kemudian ubah text tersebut menjadi “Beli Mobil”, dan “Jual Mobil”. Ubah spacing-nya menjadi 72px Lalu, letakan Menu Navigasi di dalam top bar area, dengan jarak sisi kiri dengan logo sebesar 364px. Cara Membuat Tombol Sign in, dan Tombol Get Started: Untuk membuat Sign in button, dan Get Started button, kamu bisa membuat komponen ini dengan cara:Ketik “Sign in”: Inter, Regular, dan 16px.Ketik “Get Started”: Inter, Bold, dan 16px.Klik text “Get Started” tersebut, dan aktifkan auto layout, tekan Shift + A pada keyboard untuk aktifkan auto layout-nya. Ubah:Horizontal Padding= 32pxVertical Padding= 18pxTambahkan warna Background Fill= #3775F1.Tekan CTRL + Shift pada keyboard, dan select text “Sign in”, dan “Get Started”, kemudian lanjut tekan Shift + A untuk aktifkan auto layout baru. Ubah:Horizontal Padding= 0px.Vertical Padding= 0px Lalu, letakan Tombol Sign in, dan Tombol Get Started di dalam top bar area, dengan jarak sisi kanan sebesar 62px. Setelah berhasil membuat Top Bar Area, serta elemen, dan komponen di dalamnya, kamu sudah bisa lanjut ke bagian selanjutnya nih, yaitu Hero Sections. 7. Bagian Hero Section Bagian Hero Section berada tepat di bawah top bar, di dalam frame utama dan berfungsi untuk menyampaikan informasi dari apa yang ditawarkan, dan memberikan gambaran dari website ini, jadi bagian ini sangat penting guys! 8. Cara Membuat Membuat Hero Section Area Untuk membuat Hero Section Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan key “F” pada keyboard, dan tempatkan ke dalam frame utama, dan tambahkan warna Background Fill diubah dari Solid menjadi linear, dengan style:stops 0% - #1B1D22, Oppacity= 0%stops 100% - #07090D, Oppacity= 100%Ubah width dari frame tersebut menjadi 1280px, dan height menjadi 665px.Aktifkan Clip Content. 9. Cara Membuat Elemen, dan Komponen di Dalam Hero Section Di dalam Hero Section, perlu kamu tambahkan elemen serta komponen penting, yang nantinya bisa memudahkan pengguna bernavigasi di dalam website ini, dan antara lain seperti Hero Message, Signed Underline, Card Tampilan Mobil, dan Mini Planet. Cara Membuat Hero Messages: Untuk membuat Hero Messages, kamu bisa membuat elemen ini dengan cara:Untuk judul, ketik text “Jual Beli Mobil Di Mana dan Kapan Saja”: Inter, Bold, dan 64px.Untuk label, Ketik text “Situs Jual Beli Mobil Terpercaya”: Inter, Reguler, dan 12px.Tambahkan Icon Verify ukuran 16px.Tekan CTRL + Shift pada keyboard, dan select text “Situs Jual Beli Mobil Terpercaya”, dan Icon Verify, kemudian lanjut tekan Shift + A untuk aktifkan auto layout baru seperti pada gambar. Ubah:Border Radius=100Spacing= 8pxHorizontal Padding= 8pxVertical Padding= 8pxTambahka Background Fill= #FFFFFF, dengan Oppacity= 13%.Untuk icon bisa kalian dapatkan di sini yaaa !. Lalu, letakan judul dan label di dalam Hero Section Area, dengan jarak sisi kiri sebesar 62px, dan sisi atas sebesar 85px Cara Membuat Sign Underline: Untuk membuat elemen Signed Underline, kamu bisa membuat elemen ini dengan cara:Pilih Pencil pada area Pen Tool, Ubah ketebalan menjadi 3px, pilih Round, dan dengan Background Fill #3775F1.Gunakan mouse kamu untuk membuat tampilan Signed Underline di bawah text judul. Lalu, letakan Sign Underline di dalam Hero Section Area, di bawah judul dengan jarak sebesar 18px Cara Membuat Card Tampilan Mobil: Untuk membuat Card Tampilan Mobil, kamu bisa membuat elemen ini dengan cara:Untuk label, Ketik text “Dealer terverfikasi”: Inter, Reguler, dan 12px.Tambahkan Icon Verify ukuran 16px.Tekan CTRL + Shift pada keyboard, dan select text “Dealer terverfikasi”, dan Icon "Verify", kemudian lanjut tekan Shift + A untuk aktifkan auto layout baru. Ubah:Horizontal Padding= 8pxVertical Padding= 8pxTambahkan, Background Fill= #E5E5E5, dengan Oppacity= 35%.Untuk nama mobil, ketik text nama mobil yang ingin ditampilkan, dengan style Inter, Reguler, 12px, dan line-height= 31.Untuk gambar, buat rectangle baru dengan Width= 385 dan Height= 179, dan style image, Kemudian pilih gambar yang ingin kamu tampilkanUntuk cari image, bisa kalian dapatkan di Unsplash, dan untuk menghilangkan background, kamu bisa gunakan Remove.bg. Susun ketiganya secara vertikal, dimulai dari label yang sudah di auto layout dengan icon verify, image mobil, dan nama mobil, tekan CTRL + Shift pada keyboard, dan klik ketiganya, kemudian tekan Shift + A untuk aktifkan auto layout baru Ubah auto layout:Width= 371pxHorizontal Padding= 12pxVertical Padding= 12px Border Radius= 20pxLalu, tambahkan stroke ketebalan 1 dengan style #EEEEEE, Oppacity= 12%.Kemudian, tambahkan Bacgkround Fill, dan diubah menjadi Linear, dengan style:stops 0% - #FFFFF, Oppacity= 100%stops 100% - #FFFFF, Oppacity= 25%. Matikan auto layout dengan klik icon minus, kemudian perbesar ukuran image mobil menjadi Width= 402, dan Height= 207, hingga terlihat keluar dari card, dan cocokan posisi gambar tersebut supaya terlihat lebih rapi.Klik Card Tampilan Mobil yang telah kamu buat, kemudian tekan CTRL + D sebanyak 2x untuk menghasilkan 2 Card Tampilan Mobil, dan jangan lupa isi nama dan gambar mobil yang sesuai:Ubah image mobil, dan sesuaikan dengan nama mobil.Lalu, posisikan ketiganya secara vertikal, dan posisikan ketiganya sesuai dengan gambar berikut.Pastikan jarak dengan hero message sebesar 142px Gambar perbaikan-2Buat rectangle dengan Width= 442, dan Height= 144, serta dengan Background Fill menjadi Linear, dengan style:stops 0% - #1A1C21, Oppacity= 0%stops 100% - #1A1C21, Oppacity= 100%. Lalu, tempatkan di atas card Tampilan Mobil yang pertama.Kemudian, tekan CTRL + D pada keyboard, lalu klik kanan rectangle tersebut dan pilih flip vertical, dan tempatkan di Card Tampilan Mobil yang terakhir, sehingga yang bagian tengah atau ke dua kosong. Cara Membuat Mini Planet:Untuk membuat “Mini Planet”, kamu bisa membuat elemen ini dengan cara:Tekan huruf “O” pada keyboard kemudian ubah ukurannya menjadi:Width= 745Height= 745Kemudian, tambahkan Background Fill, dan diubah menjadi Linear dengan stylestops 0% - #1B1D22, Oppacity= 0%stops 100% - #090A0C, Oppacity= 100%.Lalu, tambahkan stroke, dan ubah menjadi Radial dengan style:stops 0% - #CCCCCC, Oppacity= 100%stops 100% - #000000, Oppacity= 100%. Tempatkan di bagian kiri Hero Section seperti gambar berikut: Cara Membuat tombol atas dan bawah:Untuk membuat tombol atas, dan bawah, kamu bisa membuatnya dengan cara:Siapkan icon upSelect icon up, klik kanan pilih frame selections, kemudian Shift + A untuk mengaktifkan auto layoutLalu, set style auto layout tersebut:Horizontal Padding= 12pxVertical Padding= 12pxBorder radius= 100Kemudian, tambahkan Background Fill, dan di diubah menjadi Linear dengan style:stops 0% - #FFFFFF, Oppacity= 25%stops 100% - #FFFFFF, Oppacity= 100% Kemudian, select icon up yang sudah kita buat auto layout-nya, lalu CTRL + D untuk copy paste secara langsung, klik kanan pada hasil paste, lalu pilih flip vertical, lalu cukup kamu sejajarkan saja seperti pada gambar. Lalu, letakan tombol atas dan bawah di dalam Hero Section Area, dengan jarak sisi kanan sebesar 62px, dan sisi atas 206px Setelah berhasil membuat top bar area, serta elemen, dan komponen di dalamnya kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu searchbar. 10. Bagian Searchbar Bagian search bar berada di atas frame hero section, di dalam frame utama yang berfungsi untuk membantu pengguna dalam mencari informasi mobil yang mereka inginkan, di dalam searchbar juga terdapat filter yang dapat digunakan untuk mencari informasi yang lebih spesifik. 11. Cara Membuat Searchbar Untuk mendesain “Search Bar”, kita akan gunakan auto layout. Pertama, masukan icon search dan kata “Cari Mobil” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift + A untuk mengaktifkan auto layout, dan tambahkan: Background Fill= #080A0EWidth= 1152Height= 94Border Radius kiri bawah= 24, dan kanan bawah= 24. Untuk membuat tampilan input-nya, kamu bisa membuat dengan cara seperti ini: Ketik text “Merek Mobil”, kemudian Shift + A, dengan:Horizontal Padding= 12pxVertical Padding= 12pxLalu, tambahkan stroke right dengan ketebalan 1 dengan style:Background Fill= #000000Oppacity= 12%Width= 251Resizing= fixed,alightment left Select auto layout tersebut, kemudian tekan CTRL + D pada keyboard hingga tampil tiga auto layout lagiKemudian sesuaikan isi text seperti pada gambar.Lalu select ke empat auto layout tersebut, dan jadikan auto layout baru dengan tekan Shift + A lagi, Dengan **Background Fill= #FFFFFF.Hilangkan border pada input Range Harga.Ubah semua resizing auto layoutnya menjadi fixed, dan ubah Width= 1152, dan Height= 94. border radius kiri atas= 24, dan kanan atas= 24. Kemudian satukan search bar awal dengan tampilan input-nya seperti pada gambar, dan tempatkan di luar Hero Section area seperti pada gambar yaa. Lalu, letakan searchbar di atas Hero Section Area, seperti gambar di atas. Setelah berhasil membuat searchbar, kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu companys stats. 12. Bagian Company Stats Bagian Company Stats berada di bawah bagian searchbar, di dalam frame utama yang berfungsi untuk menampikan informasi kepada pengunjung apa saja yang sudah di raih oleh website ini, dan contohnya menampilkan informasi seperti jumlah mobil terjual, jumlah pelanggan, jumlah brand. 13. Cara Membuat Company Stats Untuk mendesain Company Stats, kita perlu membuat text dulu untuk stats atau angka dengan style Inter, Semibold, dan 72px. dan untuk deskripsi dengan style Inter, Reguler, dan 32px. select kedua text-nya **kemudian Shift + A untuk menjadikannya auto layout, Kemudian, kalian bisa select auto layout tersebut dan tekan CTRL + D sebanyak 2x untuk paste 2 auto layout yang sama, dan bisa kalian sesuaikan isinya seperti pada gambar. Tambahkan tampilan world map di atas 3 auto layout tersebut, untuk World Mapnya bisa kalian dapatkan di sini yaaaa!. kemudian seleksi semua elemennya, lalu ketikan shortcut CTRL + ALT + G untuk menjadikan frame, lalu pastikan frame tampilan world map, ada di posisi paling bawah. Lalu, letakan company stats di bawah searchbar, di dalam frame utama dengan jarak sebesar 120px Setelah berhasil membuat company stats, kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu judul untuk galeri tampilan mobil card. 14. Bagian Judul untuk Galeri Tampilan Mobil Card Bagian judul ini berada di bawah company stats, di dalam frame utama dan berfungsi untuk menginformasikan kepada pengguna kalau bagian yang sedang di kunjungi adalah Galeri Tampilan Mobil Card, dan bagian ini berisi heading text serta tombol see all. 15. Cara Membuat Judul untuk Galeri Tampilan Mobil Card Untuk mendesain Galeri Tampilan Mobil Card, kita perlu membuat judul galeri tersebut dulu, dan kamu bisa membuat dengan cara: Ketik text “Mokas Terpopuler” dengan *style *Inter, Bold, dan 44px.Tambahkan icon right dengan warna #9A9EA2 dan kata “See All” style Inter, Bold, dan 20px, serta dengan stroke ketebalan 1, dengan warna #E7E7E9. lalu select keduanya dan Shift + A untuk mengaktifkan auto layoutSejajarkan keduanya seperti pada gambar Lalu, letakan Judul di bawah company stats, di dalam frame utama dengan jarak sebesar 120px Setelah berhasil membuat judul untuk galeri tampilan mobil card, kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu galeri tampilan mobil card. 16. Bagian Tampilan Mobil Card Bagian tampilan mobil card berada di bawah judul untuk galeri tampilan mobil card, di dalam frame utama dan merupakan konten card yang berfungsi untuk menampilkan daftar mobil bekas terpopuler atau yang lagi banyak di cari oleh calon pembeli. 17. Cara Membuat Tampilan Mobil Card Untuk Tampilan Mobil Card, ini mirip seperti yang ada di Hero Section, sehingga kita akan memanfaatkan hal tersebut, dan kamu bisa meng-copy card yang ada di hero section. Kemudian ubah style dan tambah beberapa elemen ke dalam card-nya seperti: “Label Dealer Tervervikasi”: warna card Background Fill #E5E5E5, Oppacity= 50%, warna Icon #427CF1, warna Text Fill= #0E1015.“judul mobil” : Inter, Medium, 17px, dan line-height= 31, Text Fill= #0E1015text harga mobil: Inter, Bold, dan 24px, Text Fill= #0E1015, dan dengan text “Rp” Oppacity= 40%.jadikan frame tersebut menjadi auto layout, ubah aligntmentnya menjadi Down, dan horizontal resizing menjadi Hug, kemudian lepaskan kembali auto layoutnya dengan mengklik tombol minus, pastikan warna Background Fill= #FFFFFF. Lalu kita bisa menambahkan tombol wishlist berbentuk hati, dan kamu bisa membuatnya dengan cara: Tambahkan icon heartSelect icon tersebut, dan klik kanan pada icon tersebut, kemudian klik frame selectionTambahkan auto layout, dan ubah Horizontal Padding= 8px, Vertical Padding= 8px, Border Radius= 100, dan ubah Background Fill= #F7F7F8.Jika sudah berbentuk seperti tzampilan gambar di bawah, kalian bisa masukan ke dalam card. Kemudian kita perlu membuat 2 label yaitu lokasi, dan negotiable. Untuk mendesain “Locations”, kita akan gunakan auto layout. Pertama, masukan icon locations dan kata lokasinya, contoh “Sudirman, Jakarta Pusat” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift A (mengaktifkan auto layout) Untuk mendesain “Negotiables”, kita juga akan gunakan auto layout. Pertama, masukan kata “Negotiable” dengan pengaturan seperti di gambar, lalu select dan Shift + A (mengaktifkan auto layout), kemudian tambahkan: Stroke dengan warna #3775F1Warna Background Fill= #3775F1, dengan Oppacity= 5%. Untuk menggabungkan 2 label berikut, dengan Tampilan Mobil Card yang telah kita edit sebelumnya, kita butuh satu frame lagi nih, dan kamu bisa membuatnya dengan cara: Tambahkan frame dengan menekan “F” pada keyboard, dengan:Width= 417Height= 414Warna Background Fill= #F7F7F8.Kemudian tambah juga stroke ketebalan 1 dengan warna #EDEDEDBorder Radius=20px Lalu kamu bisa memasukan 2 label, dan Tampilan Mobil card-nya ke dalam frame yang baru kita buat seperti pada gambar. Kemudian, kamu bisa copy paste desain card tersebut, dan meletakannya ke dalam frame utama, serta kamu juga bisa mengikuti dengan pola gambar berikut. Dan, jangan lupa untuk memastikan jarak horizontal antar card sebesar 20px, dan vertikalnya 36px ya guys Setelah berhasil membuat tampilan mobil card, kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu Pencarian Dealer Mobil Terdekat. 18. Bagian Pencarian Dealer Mobil Terdekat Bagian pencarian dealer mobil terdekat berada di bawah tampilan mobil card di dalam frame utama, befungsi untuk membantu pengguna untuk mencari dealer yang terdekat dengan lokasi mereka sekarang, dan berisikan fitur seperti tampilan map, search bar, dan card konten yang berisi informasi dealer yang disarankan. 19. Cara Membuat Pencarian Dealer Mobil Terdekat Area Untuk membuat pencarian Dealer Mobil Terdekat Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan key “F” pada keyboard, dan tempatkan ke dalam *frame *****utama, dan tambahkan warna #090B0FUbah width dari frame tersebut menjadi 1280px, dan height menjadi 1142px.Aktifkan Clip Content 20. Cara Membuat Elemen, dan Komponen di dalam Pencarian Dealer Mobil Terdekat Untuk judul section ini kalian bisa meng-copy judul “untuk Galeri Tampilan Mobil Card” karena memiliki kriteria yang sama, dan yang perlu di ubah itu adalah: Warna text judul: #FFFFFF.tombol “See All”: Warna text: #FFFFFF, dan stroke oppacity menjadi 18%.Kemudian, kalian bisa sejajarkan sama seperti gambar. Lalu, letakan ke dalam pencarian Dealer Mobil Terdekat Area dan jarak dengan sisi atas sebesar 64px Cara Membuat Map: Untuk gambar map-nya **kita perlu sebuah rectangle terlebih dulu dengan Width= 1151, dan Height= 443. kemudian kalian bisa isi rectangle dengan gambar maps dari Unsplash. Lalu letakan Map ke dalam pencarian Dealer Mobil Terdekat Area, di bawah judul dengan jarak sebesar 48px Cara Membuat Searchbar: Kemudian kita perlu *input-*nya, dengan menambahkan icon search, lalu select icon tersebut, klik kanan kemudian pilih frame selection, tambahkan auto layout (klik tombol “+” pada auto layout) kemudian ubah: Horizontal Padding= 12px.Vertical Padding= 12px.Tambahkan warna #3775F1 pada auto layout.Ubah warna icon menjadi #FFFFFF.Tambahkan Border Radius= 100. Lalu, akan kita gabungkan icon search yang sudah kita tambahkan auto layout tadi, dan kata “Cari Dealer di Map” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift + A untuk mengaktifkan auto layout, dan tambahkan: Jarak auto layout-nya Auto.Background Fill= #22242AWidth= 708Height= 104Border Radius= 100 Lalu, letakan searchbar di atas map (sama seperti searchbar di atas hero sections), dengan susunan seperti ini: Setelah selesai membuat judul, map, dan searchbar, selanjutnya kita perlu menambahkan elemen card yang berfungsi menampilkan informasi dealer terdekat sesuai area pengguna. 12. Bagian Company Stats Bagian Company Stats berada di bawah bagian searchbar, di dalam frame utama yang berfungsi untuk menampikan informasi kepada pengunjung apa saja yang sudah di raih oleh website ini, dan contohnya menampilkan informasi seperti jumlah mobil terjual, jumlah pelanggan, jumlah brand. 13. Cara Membuat Company Stats Untuk mendesain Company Stats, kita perlu membuat text dulu untuk stats atau angka dengan style Inter, Semibold, dan 72px. dan untuk deskripsi dengan style Inter, Reguler, dan 32px. select kedua *text-*nya **kemudian Shift + A untuk menjadikannya auto layout, Kemudian, kalian bisa select auto layout tersebut dan tekan CTRL + D sebanyak 2x untuk paste 2 auto layout yang sama, dan bisa kalian sesuaikan isinya seperti pada gambar. Tambahkan tampilan world map di atas 3 auto layout tersebut, untuk World Mapnya bisa kalian dapatkan di sini yaaaa! kemudian seleksi semua elemennya, lalu ketikan shortcut CTRL + ALT + G untuk menjadikan frame, lalu pastikan frame tampilan world map, ada di posisi paling bawah. Lalu, letakan company stats di bawah searchbar, di dalam frame utama dengan jarak sebesar 120px Setelah berhasil membuat company stats, kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu judul untuk galeri tampilan mobil card. 14. Bagian Judul untuk Galeri Tampilan Mobil Card Bagian judul ini berada di bawah company stats, di dalam frame utama dan berfungsi untuk menginformasikan kepada pengguna kalau bagian yang sedang di kunjungi adalah Galeri Tampilan Mobil Card, dan bagian ini berisi heading text serta tombol see all 15. Cara Membuat Judul untuk Galeri Tampilan Mobil Card Untuk mendesain Galeri Tampilan Mobil Card, kita perlu membuat judul galeri tersebut dulu, dan kamu bisa membuat dengan cara: Ketik text “Mokas Terpopuler” dengan style Inter, Bold, dan 44px.Tambahkan icon right dengan warna #9A9EA2 dan kata “See All” style Inter, Bold, dan 20px, serta dengan stroke ketebalan 1, dengan warna #E7E7E9. lalu select keduanya dan Shift + A untuk mengaktifkan auto layoutSejajarkan keduanya seperti pada gambar Lalu, letakan Judul di bawah company stats, di dalam frame utama dengan jarak sebesar 120px Setelah berhasil membuat judul untuk galeri tampilan mobil card, kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu galeri tampilan mobil card. 16. Bagian Tampilan Mobil Card Bagian tampilan mobil card berada di bawah judul untuk galeri tampilan mobil card, di dalam frame utama dan merupakan konten card yang berfungsi untuk menampilkan daftar mobil bekas terpopuler atau yang lagi banyak di cari oleh calon pembeli. 17. Cara Membuat Tampilan Mobil Card Untuk Tampilan Mobil Card, ini mirip seperti yang ada di Hero Section, sehingga kita akan memanfaatkan hal tersebut, dan kamu bisa meng-copy card yang ada di hero section. Kemudian ubah style dan tambah beberapa elemen ke dalam card-nya seperti: “Label Dealer Tervervikasi”: warna card Background Fill #E5E5E5, Oppacity= 50%, warna Icon #427CF1, warna Text Fill= #0E1015.“judul mobil” : Inter, Medium, 17px, dan line-height= 31, Text Fill= #0E1015text harga mobil: Inter, Bold, dan 24px, Text Fill= #0E1015, dan dengan text “Rp” Oppacity= 40%.jadikan frame tersebut menjadi auto layout, ubah aligntmentnya menjadi Down, dan horizontal resizing menjadi Hug, kemudian lepaskan kembali auto layoutnya dengan mengklik tombol minus, pastikan warna Background Fill= #FFFFFF. Lalu kita bisa menambahkan tombol wishlist berbentuk hati, dan kamu bisa membuatnya dengan cara: Tambahkan icon heartSelect icon tersebut, dan klik kanan pada icon tersebut, kemudian klik frame selectionTambahkan auto layout, dan ubah Horizontal Padding= 8px, Vertical Padding= 8px, Border Radius= 100, dan ubah Background Fill= #F7F7F8.Jika sudah berbentuk seperti tampilan gambar di bawah, kalian bisa masukan ke dalam card. Kemudian kita perlu membuat 2 label yaitu lokasi, dan negotiable. Untuk mendesain “Locations”, kita akan gunakan auto layout. Pertama, masukan icon locations dan kata lokasinya, contoh “Sudirman, Jakarta Pusat” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift A (mengaktifkan auto layout) Untuk mendesain “Negotiables”, kita juga akan gunakan auto layout. Pertama, masukan kata “Negotiable” dengan pengaturan seperti di gambar, lalu select dan Shift + A (mengaktifkan auto layout), kemudian tambahkan: Stroke dengan warna #3775F1Warna Background Fill= #3775F1, dengan Oppacity= 5%. Untuk menggabungkan 2 label berikut, dengan Tampilan Mobil Card yang telah kita edit sebelumnya, kita butuh satu frame lagi nih, dan kamu bisa membuatnya dengan cara: Tambahkan frame dengan menekan “F” pada keyboard, dengan:Width= 417Height= 414Warna Background Fill= #F7F7F8.Kemudian tambah juga stroke ketebalan 1 dengan warna #EDEDEDBorder Radius= 20px Lalu kamu bisa memasukan 2 label, dan Tampilan Mobil card-nya ke dalam frame yang baru kita buat seperti pada gambar. Kemudian, kamu bisa copy paste desain card tersebut, dan meletakannya ke dalam frame utama, serta kamu juga bisa mengikuti dengan pola gambar berikut. Dan, jangan lupa untuk memastikan jarak horizontal antar card sebesar 20px, dan vertikalnya 36px ya guys Setelah berhasil membuat tampilan mobil card, kamu sudah bisa lanjut untuk membuat bagian berikutnya dari landing pages nih, yaitu Pencarian Dealer Mobil Terdekat. 18. Bagian Pencarian Dealer Mobil Terdekat Bagian pencarian dealer mobil terdekat berada di bawah tampilan mobil card di dalam frame utama, befungsi untuk membantu pengguna untuk mencari dealer yang terdekat dengan lokasi mereka sekarang, dan berisikan fitur seperti tampilan map, search bar, dan card konten yang berisi informasi dealer yang disarankan. 19. Cara Membuat Pencarian Dealer Mobil Terdekat Area Untuk membuat pencarian Dealer Mobil Terdekat Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan key “F” pada keyboard, dan tempatkan ke dalam frame \utama, dan tambahkan warna #090B0FUbah width dari frame tersebut menjadi 1280px, dan height menjadi 1142px.Aktifkan Clip Content 20. Cara Membuat Elemen, dan Komponen di dalam Pencarian Dealer Mobil Terdekat Untuk judul section ini kalian bisa meng-copy judul “untuk Galeri Tampilan Mobil Card” karena memiliki kriteria yang sama, dan yang perlu di ubah itu adalah: Warna text judul: #FFFFFF.tombol “See All”: Warna text: #FFFFFF, dan stroke oppacity menjadi 18%.Kemudian, kalian bisa sejajarkan sama seperti gambar. Lalu, letakan ke dalam pencarian Dealer Mobil Terdekat Area dan jarak dengan sisi atas sebesar 64px Cara Membuat Map: Untuk gambar map-nya **kita perlu sebuah rectangle terlebih dulu dengan Width= 1151, dan Height= 443. kemudian kalian bisa isi rectangle dengan gambar maps dari Unsplash. Lalu letakan Map ke dalam pencarian Dealer Mobil Terdekat Area, di bawah judul dengan jarak sebesar 48px Cara Membuat Searchbar: Kemudian kita perlu *input-*nya, dengan menambahkan icon search, lalu select icon tersebut, klik kanan kemudian pilih frame selection, tambahkan auto layout (klik tombol “+” pada auto layout) kemudian ubah: Horizontal Padding= 12px.Vertical Padding= 12pxTambahkan warna #3775F1 pada auto layout.Ubah warna icon menjadi #FFFFFF.Tambahkan Border Radius= 100. Lalu, akan kita gabungkan icon search yang sudah kita tambahkan auto layout tadi, dan kata “Cari Dealer di Map” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift + A untuk mengaktifkan auto layout, dan tambahkan: Jarak auto layout-nya Auto.Background Fill= #22242AWidth= 708Height= 104Border Radius= 100 Lalu, letakan searchbar di atas map (sama seperti searchbar di atas hero sections), dengan susunan seperti ini: Setelah selesai membuat judul, map, dan searchbar, selanjutnya kita perlu menambahkan elemen card yang berfungsi menampilkan informasi dealer terdekat sesuai area pengguna. Cara Membuat Elemen Card ke dalam Pencarian Dealer Mobil Terdekat Untuk tampilan card, kamu bisa membuat elemen untuk bagian dalamnya terlebih dulu, dengan cara: Tambahkan shape lingkaran dengan ukuran Width= 139, dan Height= 139, kemudian isi dengan gambar bangunan yang bisa kamu temukan di Unsplash.Tambahkan text brand+dealership, contoh Honda Dealership.Tambahkan label lokasi (bisa kalian copy dari desain card sebelumnya).Tambahkan tombol cek dealer, membuatnya dengan pertama, masukan icon right dan kata “Cek Dealer” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift + A untuk mengaktifkan auto layout, dan tambahkan stroke dengan ketebalan 1 dan warna #E7E7E9, Oppacity= 18% Ketika semua elemen di dalamnya siap, select semuanya, kemudian Shift + A maka akan terbentuk auto layout baru, tambahkan warna Linear, dengan style: stops 0% - #A7AFBE, dengan Oppacity= 100%**stops 100% - #1A1D23, dengan Oppacity= 100%**Oppacity Linear= 12%Tambahkan, stroke ketebalan 1Tambahkan warna #EDEDED Oppacity= 22%Horizontal Padding= 16pxVertical Padding= 16px Lalu select card tersebut, dan CTRL + D sebanyak 3x, kemudian ganti gambar, isi text, dan susun card-nya secara horizontal. Lalu, letakan elemen card ke dalam pencarian Dealer Mobil Terdekat Area, di bawah searchbar dengan jarak 100px Setelah berhasil membuat Pencarian Dealer Mobil Terdekat Area, serta elemen, dan komponen di dalamnya, kamu sudah bisa lanjut untuk membuat bagian berikutnya nih, yaitu Rekomendasi Mobil Baru. 21. Bagian Rekomendasi Mobil Baru Bagian Rekomendasi Mobil Baru berada di bawah Pencarian Dealer Mobil Terdekat Area, di dalam frame utama yang berfungsi untuk menampilkan informasi daftar mobil baru yang baru saja dijual, sehingga pengunjung tidak hanya di tampilkan informasi lama, melainkan juga yang terbaru. 22. Cara Membuat Rekomendasi Mobil Baru Untuk judul section ini kalian bisa meng-copy judul “untuk Galeri Tampilan Mobil Card” karena memiliki kriteria yang sama, dan yang perlu di ubah itu hanya isi judulnya saja, tapi kita perlu menambahkan tombol kiri, dan kanan untuk membantu pengguna, dalam melihat horizontal slider, dan kamu bisa membuatnya dengan cara: Tambahkan icon right, select icon tersebut, klik kanan kemudian pilih frame selections, kemudian tambahkan auto layout, dengan style:Horizontal Padding= 12pxVertical Padding= 12pxTambahkan warna #3775F1Lalu, ganti warna iconnya menjadi #FFFFFF.Lakukan hal yang sama kepada icon left, namun ganti warna *frame *auto layoutnya menjadi #2F3137, Oppacity= 8%.Select kedua icon-nya, kemudian Shift + A untuk mengaktifkan auto layout kedua icon tersebut.Sejajarkan auto layout icon tersebut dengan Judul, dan tombol “See All” seperti gambar. Kemudian untuk galerinya, kalian dapat meng-copy card konten dari “Mokas Terpopuler”, karena untuk *card-*nya **mirip, dan kalian bisa susun secara horizontal. Lalu, letakan Rekomendasi Mobil Baru ke dalam frame utama, di bawah pencarian Dealer Mobil Terdekat Area dengan jarak 120px Setelah berhasil membuat Rekomendasi Mobil Baru serta elemen, dan komponennya kamu sudah bisa lanjut untuk membuat bagian terakhir nih, yaitu Footer. Bagian Rekomendasi Mobil Baru berada di bawah Pencarian Dealer Mobil Terdekat Area, di dalam frame utama yang berfungsi untuk menampilkan informasi daftar mobil baru yang baru saja dijual, sehingga pengunjung tidak hanya di tampilkan informasi lama, melainkan juga yang terbaru. 22. Cara Membuat Rekomendasi Mobil Baru Untuk judul section ini kalian bisa meng-copy judul “untuk Galeri Tampilan Mobil Card” karena memiliki kriteria yang sama, dan yang perlu di ubah itu hanya isi judulnya saja, tapi kita perlu menambahkan tombol kiri, dan kanan untuk membantu pengguna, dalam melihat horizontal slider, dan kamu bisa membuatnya dengan cara: Tambahkan icon right, select icon tersebut, klik kanan kemudian pilih frame selections, kemudian tambahkan auto layout, dengan style:Horizontal Padding= 12pxVertical Padding= 12pxTambahkan warna #3775F1Lalu, ganti warna iconnya menjadi #FFFFFF.Lakukan hal yang sama kepada icon left, namun ganti warna frame auto layoutnya menjadi #2F3137, Oppacity= 8%.Select kedua icon-nya, kemudian Shift + A untuk mengaktifkan auto layout kedua icon tersebut.Sejajarkan auto layout icon tersebut dengan Judul, dan tombol “See All” seperti gambar. Kemudian untuk galerinya, kalian dapat meng-copy card konten dari “Mokas Terpopuler”, karena untuk card-nya mirip, dan kalian bisa susun secara horizontal. Lalu, letakan Rekomendasi Mobil Baru ke dalam frame utama, di bawah pencarian Dealer Mobil Terdekat Area dengan jarak 120px Setelah berhasil membuat Rekomendasi Mobil Baru serta elemen, dan komponennya kamu sudah bisa lanjut untuk membuat bagian terakhir nih, yaitu Footer. 23. Bagian Footer Bagian footer berada di bawah Rekomendasi Mobil Baru, di dalam frame utama, dan paling bawah sekali, yang berfungsi untuk memberikan informasi kepada pengguna dengan menampilkan logo perusahaan, menu, kontak, hingga lokasi. [perbaikan] - di copy aja ka yem 24. Cara Membuat Footer Area Untuk membuat Footer Area, kamu bisa membuat frame terlebih dahulu, dengan cara: Tekan tombol “F” pada keyboard lalu, klik kiri pada mouse untuk menambahkan frame baru Footer, kemudian tempatkan ke dalam frame utama.Kemudian, select frame Footer, dan ubah:Background Fill: #FFFFFFwidth menjadi 1280px, sama seperti frame utama.height menjadi 422pxJangan lupa masukan ke dalam frame utama, dan letakan di bagian paling bawah. 25. Cara Membuat Elemen, dan Komponen di Dalam Footer Untuk membuat “footer” terbagi menjadi 2 area, yaitu kanan, dan kiri, untuk bagian kanan berisi identitas website, dan untuk yang kanan berisi hyperlink. Untuk membuat bagian kiri, kamu bisa membuatnya dengan cara: ketik text “Supercars”: Inter, Bold, dan 64px.ketik text untuk deskripsi: Inter, Reguler, dan 16px.Untuk mendesain “Locations”, kita akan gunakan auto layout. Pertama, masukan icon locations dan kata lokasinya, contoh “Jakarta Selatan, Indonesia” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift + A (mengaktifkan auto layout).Untuk mendesain “Phone Number”, kita juga akan gunakan auto layout. Pertama, masukan icon phone dan kata nomor telfon, contoh “+62 0876-3456-3212” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift + A (mengaktifkan auto layout). Kemudian sesuaikan susunannya seperti di gambar, dengan jarak masing-masing sebesar 24px Lalu, letakan ketiga lemennya ke dalam footer area, dengan jarak sebelah sisi kiri sebesar 62px, dan sisi atas sebesar 62px Untuk membuat bagian kanan, kamu bisa membuatnya dengan cara: Untuk judul, ketik text ”Parkir”: Inter, Bold, dan 24px.Untuk hyperlink, ketik text “Sign in”: Inter, Reguler, dan 16px.Untuk jarak tiap hyperlink sebesar 12pxUntuk jarak judul dengan hyperlink berjarak 24pxKemudian jarak dengan antara menu sebesar 134px Kemudian terapkan style judul, dan hyperlink kepada elemen yang berkaitan, dan untuk isi text-nya kalian bisa lihat seperti pada gambar. Setelah menyelesaikan bagian Footer, langkah selanjutnya itu adalah kita perlu memastikan nih kalau susunan tiap bagian sudah benar, maka dari itu kita perlu mengeceknya dari awal. 26. Menyusun section Landing Page Setelah section-section selesai dibuat, langkah selanjutnya adalah menyusun menjadi Landing Page, dimulai dari Top Bar Area → Hero Section Area → Search Bar → Company Stats → Mokas Terpopuler → Pencarian Dealer Mobil → Rekomendasi Mobil Baru → Footer. Tiap section jangan lupa diberi jarak supaya sesuai dengan gambar di atas. 27. Result Akhirnya, kamu telah selesai membuat desain “Landing Page Jual-Beli Mobil Bekas” dan selanjutnya adalah kamu sudah bisa membuat presentasi desain dengan mockup 🤩, dan untuk membuatnya kita tidak perlu pakai plugin, cukup pakai website shots saja 😁. 28. Membuat Presentasi Desain dengan Mockup Untuk membuat presentasi desain menggunakan mockup, kamu bisa gunakan website shots.so ini yaa! Karena saat kamu ingin mempresentasikan desainmu, client harus bisa melihat gambaran desain yang sudah jadi itu seperti apa, dan berikut caranya: Cara Membuat Presentasi Desain dengan Mockup 1. Export Frame Utama, kemudian Buka website shots(.)so Pertama, kamu bisa export dulu frame utama yang sudah selesai kamu desain, dengan nilai: Scale: 4x (bisa di ubah menjadi 1x-3x, tergantung kebutuhan kamu)Type: PNG (bisa di ubah ke JPG, saran saya pakai PNG saja) Kemudian, bisa kamu lanjutkan dengan membuka laman shots.so 2. Memilih Mockup yang akan di Gunakan Kemudian pada left sidebar, kamu bisa mengklik opsi Screenshot, pilih Laptop, pilih Macbook Air M2. 3. Setelah Mockup dipilih, lalu Upload Gambar yang Sudah di Export Lalu, klik pada area kotak merah untuk mengupload gambar yang sudah kamu export sebelumnya. 4. Merubah Background Gradient menjadi Tansparent, kemudian Download Pada left sidebar, kamu bisa mengklik frame, kemudian ubah background menjadi transparent, kemudian klik download. 5. Hasil setelah Mockup berhasil di Download Nah, perlu kamu tau dulu nih, karena menyesuaikan layar laptop, jadi gambarnya akan terpotong sesuai ukuran layar laptop tersebut ya, sehingga pada gambar yang terlihat hanya sampai bagian searchbar saja. Setelah berhasil di download kamu sudah bisa bagikan, dan presentasikan kepada client-client kamu deh 🤩🤩😁 29. Kesimpulan Tutorial Membuat Landing Pages Jual-Beli Mobil Bekas Sebelumnya saya ucapkan selamat, karena kamu telah berhasil membuat desain “Landing Page Jual-Beli Mobil Bekas” menggunakan figma, dan perlu diingat kalau proses ini mencakup beberapa tahapan penting seperti: Persiapan awal: Memahami software atau website figma, hingga pembuatan frame utama.Memahami Struktur Landing Page: Membuat komponen-komponen utama seperti Top Bar Area - Hero Section Area - Search Bar - Company Stats - Mokas Terpopuler - Pencarian Dealer Mobil - Rekomendasi Mobil Baru - FooterMemahami Elemen untuk Landing Pages: Menambahkan elemen-elemen penting seperti gambar, teks, ikon, dan tombol untuk memberikan informasi yang jelas dan lengkap tentang mobil yang dijual.Memahami Style yang digunakan untuk Landing Pages: Mengatur warna, ukuran, dan jarak antar elemen untuk menciptakan desain yang menarik dan mudah dipahamiMenambahkan elemen interaktif: membuat tombol, dan input untuk meningkatkan pengalaman pengguna dalam mengakses konten yang diberikan. Nah, dengan melalui proses ini, kamu telah berhasil menciptakan sebuah landing page yang informatif, menarik, serta bermanfaat, dan pastinya tidak hanya memenuhi kebutuhan pengguna untuk mendapatkan informasi lengkap tentang mobil yang dijual, tetapi juga memberikan kesan visual yang tak terlupakan 🤩🤩. Setelah mempelajari, dan menggunakan teknik-teknik yang dipakai dalam tutorial ini, saya berharap dapat membantu diperjalanan kamu sebagai UI/UX Designer 😊😊. Serta jangan lupa untuk terus berlatih figma, serta fitur-fiturnya seperti auto layout dan component, karena akan sangat membantu kamu kedepannya. Sekali lagi saya ucapkan selamat ya untuk kamu karena telah sukses membuat “Landing Page Jual-Beli Mobil Bekas”, good job guys 😊😊. Bagaimana? tutorial-nya keren bukan? nah, jika kamu ingin belajar lebih banyak lagi tentang UI/UX dan meningkatkan skill, dan keterampilan desain kamu, maka jangan sampai lewatkan kesempatan untuk mengeksplorasi kelas-kelas UI/UX di BuildWithAngga !!!, karena kamu bisa pelajari teknik-teknik terbaru, dan meningkatkan portofolio kamu, bersama para mentor di bidangnya. Kredit Gambar Unsplash Setelah mengikuti step-by-step, akhirnya kamu berhasil membuat Landing Page “Jual-Beli Mobil Bekas”. Saya ucapkan selamat yaa!! Bagaimana? Tutorialnya keren bukan? Nah, jika kamu ingin belajar lebih banyak lagi tentang UI/UX dan meningkatkan skill, dan keterampilan desain kamu, maka jangan sampai lewatkan kesempatan untuk mengeksplorasi kelas-kelas UI/UX di BuildWithAngga! Karena kamu bisa pelajari teknik-teknik terbaru, dan meningkatkan portofolio kamu, bersama para mentor di bidangnya. Kredit Gambar Aaron HuberMartin KatlerTravis EssingerDuncan WinslowMate VanyekJavier EstebanDekler PHEli ClouseEugene TkachenkoVadym KudriavtsevAndrey ZvyagintsevSamuele Errico PiccariniPhil DesforgesPatrick TomassoChris LiveraniKOBU Agency

Halo semua 👋🏻. Di tutorial ini, kita akan sama-sama belajar cara membuat homepage booking tiket film. Pada tutorial ini kita akan menggunakan fitur dari Figma yaitu auto layout. Mengapa membuat homepage terlebih dahulu? Homepage pada aplikasi booking tiket film penting karena memberikan kesan pertama, memudahkan pencarian film dan bioskop, menampilkan film populer dan promo, serta mengarahkan pengguna untuk segera memesan tiket. Yuk kita mulai desainnya! 1. Memilih Frame Frame yang digunakan pada desain ini yaitu menggunakan template iPhone 14 & 15 pro dengan ukuran 303x852 pixels. Untuk warna background pada frame menggunakan warna #F8F8F9 2. Membuat Header Logo Buatlah lingkaran menggunakan tools ellips (menekan huruf “O” pada keyboard). Beri ukuran 48 px. Setelah itu beri warna dengan menggunakan gradient dan memberi warna yang sudah tertera pada gambar di atas. Untuk ikonnya, aku menggunakan plugin dari Figma yaitu Iconify dan cari ikon dengan kata kunci antara lain “movie”, “cinema”, dan “film”. Ukuran ikonnya 28 px Kemudian select kedua object dan beri align horizontal centers dan align vertical centers dan kedua object tekan Ctrl+G pada keyboard untuk digabungkan menjadi satu. Dan beri nama layer menjadi “icon”. Buatlah teks dengan menggunakan typeface Poppins ukuran 20 pts dan menggunakan tipe bold. Kemudian select layer teks dan letakan di samping kanan layer “icon”. Dan select keduanya dan beri auto layout lalu ubah opsi Horizontal gap between items: 10px 3. Membuat Search Bar Membuat search bar kita akan menggunakan auto layout. Berikut langkahnya: Masukkan ikon search tipe outline dari Iconsax ukuran 24px.Buat teks “Search movies . . .” = Poppins, Regular, 14, warna #B2B5BA kemudian letakan di samping kanan ikon searchSelect teks “Search movies. . . “ dan ikon search dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 12pxAlign leftHorizontal padding: 14pxVertical padding: 16pxRezize search bar dengan width: 361px, height: 58px, dan ubah corner radius: 20Beri warna fill #E8E8E8 4. Membuat desain container “Now Playing” Buat teks “Now Playing” = Poppins, bold, 16, warna #13181DBuat teks “See all” = Poppins, medium, warna #F97316 kemudian letakan di sebelah kanan teks “Now Playing”Select kedua teks dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: AutoAlign: middleSelect objek lalu ubah size width: 361px Untuk gambar poster film, kita akan mengambil 3 poster film. Pada kasus ini kita akan mengambil poster film Twisters, Deadpool & Wolverine, dan Longlegs . Berikut langkahnya: Letakan poster film Twisters dengan size width: 165px, height: 245px, ubah corner radius: 10Letakan poster *film *Deadpool & Wolverine di samping kanan poster film Twisters dengan size width: 173px, height: 257px, ubah corner radius: 10Letakan poster *film *Longlegs di samping kanan poster film Deadpool & Wolverine dengan size width: 165px, height: 245px, ubah corner radius: 10Select ketiga film poster dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi: Untuk membuat movie title dan kategori chip akan dijadikan auto layout, Berikut langkahnya: Buat teks “Deadpool & Wolverine” = Poppins, bold, 20, warna #13181DUntuk kategori chip, ikurin langkahnya:Buat teks “Action” = Poppins, regular, 12, warna #F97316Select teks “Action” dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Align centerHorizontal padding: 8pxVertical padding: 4pxBeri warna fill #FFE5D3Buatlah yang sama pada teks “2h30m”, dan “D17”Letakan chip “2h30m” di samping kanan chip “Action”Letakan chip “D17” di samping kanan chip “2h30m”Select ketiga chip dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 8pxLetakan kategori chip dibawah teks movie title, kemudian select teks movie title dan kategori chip dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: 8pxAlign center Letakan teks “Now Playing”, “See all” di atas, poster film di bawahnya, dan movie title, kategori chip di bawah poster film. Kemudian select ketiganya dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi: Gap between items: 16pxAlign center 5. Membuat desain container “Coming Soon” Buat teks “Coming Soon” = Poppins, bold, 16, warna #13181DBuat teks “See all” = Poppins, medium, warna #F97316 kemudian letakan di sebelah kanan teks “Now Playing”Select kedua teks dan jadikan ke auto layout (Shift+A pada keyboard) lalu ubah opsi:Gap between items: AutoAlign: MiddleSelect objek lalu ubah size width: 361px Lalu untuk movie card ini pertama taruh gambar poster film dengan ukuran yang sudah ditentukan pada kasus ini kita akan mengambil poster film Trap, Borderlands, dan Mufasa: The Lion King. Berikut langkahnya: Masukkan poster film Trap dengan size width: 125px, height: 188px, ubah corner radius: 10Di bawahnya letakan teks “Trap” = Poppins, semibold, 14, warna #13181DDi bawah teks “Trap” buatlah kategori chip yang langkahnya sama seperti membuat di desain container “Now Playing”Select tiga kategori chip dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi:Ubah direction: wrapHorizontal gap between items: 8pxVertical gap between items: 8pxUbah size width: 125pxBuatlah yang movie card sama pada film Borderlands dan **Mufasa: The Lion King Movie card yang sudah dibuat, select ketiga card ini di-select lalu dijadikan ke auto layout lalu ubah opsi: Horizontal gap between items: 16pxAlign: left Akhirnya select “Coming Soon” dan movie card dan jadikan auto layout (Shift+A pada keyboard) lalu ubah opsi: Vertical gap between items: 16pxAlign: Top left 6. Membuat Navigation Bar Dalam membuat navigation bar, ikuti langkah-langkah berikut: Masukkan ikon home, buildings, dan ticket. Ikon ini dapat diambil dari Iconsax dari community Figma.Berikan teks informasi di bawah ikon:Pada ikon home beri teks “Home” = Poppins, medium, 12, warna #F97316pada ikon buildings beri teks “Theatre” = Poppins, medium, 12, warna #13181DPada ikon ticket beri teks “My Order” = Poppins, medium, 12, warna #13181DPada ikon home dan teksnya beri warna yang sudah ditentukan di gambarSelect setiap ikon dan teks, dijadikan auto layout dan ubah opsi:Vertical gap between items: 4pxAlign: top centerSelect ketiga object lalu dijadikan auto layout dan atur jaraknya sesuai tertera pada gambar jangan lupa beri warna filling yaitu warna putih.Atur size navigation bar sesuai dengan gambar. 7. Menyusun desain-desain komponen Setelah komponen-komponen sudah dibuat, waktunya menyusun menjadi homepage, dimulai dari Header logo —>Search bar—>Now Playing—>Coming Soon—>Navigation bar. Tiap komponen jangan lupa diberi jarak sesuai dengan gambar di atas. Result Nice! Dengan mengikuti step by step, akhirnya kamu berhasil membuat homepage untuk booking tiket film. Good job!!! Kesimpulan Pembuatan desain homepage untuk aplikasi booking tiket film, penting untuk memberikan kesan pertama yang menarik, memudahkan navigasi dan pencarian film, menampilkan film yand sedang ditayang dan mengarahkan pengguna untuk segera memesan tiket. Juga dalam mendesain menggunakan auto layout di Figma memungkinkan desainer untuk membuat desain yang responsif dan mudah disesuaikan, memastikan elemen-elemen UI tetap rapi dan terorganisir dengan baik di berbagai ukuran layar. Mau belajar lebih dalam mengenai UI Design? Yuk belajar UI Design bersama BuildWithAngga dan cek kelas-kelas terbarunya! Kredit Asset poster film diambil dari IMDb https://www.imdb.com/title/tt6263850/mediaviewer/rm136803841/?ref_=tt_ov_ihttps://www.imdb.com/title/tt12584954/mediaviewer/rm3285740033/?ref_=tt_ov_ihttps://www.imdb.com/title/tt23468450/mediaviewer/rm800947457/?ref_=tt_ov_ihttps://www.imdb.com/title/tt26753003/mediaviewer/rm933197569/?ref_=tt_ov_ihttps://www.imdb.com/title/tt4978420/mediaviewer/rm2581545217/?ref_=tt_ov_ihttps://www.imdb.com/title/tt13186482/mediaviewer/rm1126268417/?ref_=tt_ov_i

Dalam era digital yang terus berkembang, saat ini desain antarmuka pengguna (UI) dan pengalaman pengguna (UX) memainkan peran penting dalam menentukan keberhasilan suatu aplikasi atau situs web. Salah satu tren yang semakin populer dan memberikan dampak besar adalah penggunaan elemen 3D. Elemen 3D tidak hanya menambah dimensi visual yang menarik, tetapi juga meningkatkan interaksi dan keterlibatan pengguna. Dengan teknologi yang semakin canggih, elemen 3D kini lebih mudah diimplementasikan dan diakses, membuatnya menjadi pilihan favorit bagi designer yang mau memberikan pengalaman yang lebih realistis dan mendalam. Pada artikel ini kita akan membahas kenapa kita butuh elemen 3D dalam desain UI/UX, manfaat yang bisa diperoleh dari menggunakan 3D elemen serta plugin Figma 3D gratis yang bisa kamu pakai dalam desainmu! Kenapa Kita Harus Pakai Element 3D dalam Desain UI/UX Kita? Apa yang dimaksud dengan Element 3D? Elemen 3D dalam desain UI/UX mengacu pada penggunaan objek tiga dimensi yang dapat memberikan dimensi tambahan pada tampilan antarmuka pengguna. Elemen ini bisa berupa model 3D, animasi, atau efek yang memberikan ilusi kedalaman dan realisme yang tidak bisa dicapai dengan desain 2D 🤩 Image by Vector to 3D Figma Plugin Lalu Apa Alasan Kita untuk Menggunakan Element 3D Tersebut? Meningkatkan Keterlibatan PenggunaInteraksi Lebih Menarik: Elemen 3D membuat UX lebih interaktif dan menarik. Misalnya, model produk 3D yang bisa diputar dan dilihat dari berbagai sudut dapat membuat user lebih tertarik dan terlibat.Visualisasi Lebih Realistis.Detail yang Lebih Menarik: Elemen 3D memungkinkan detail yang lebih baik dan kompleks dibandingkan dengan elemen 2D. Ini sangat berguna dalam aplikasi seperti arsitektur, desain produk, atau e-commerce, di mana pengguna perlu melihat objek secara detail.Estetika dan Daya Tarik VisualDesain Lebih Modern dan Menarik: Elemen 3D dapat memberikan tampilan yang lebih modern dan inovatif, menarik perhatian dan memberikan kesan profesional pada aplikasi atau situs web. Plugin 3D Element Figma yang Dapat Kamu Pakai Gratis! Fig3D Plugin ini memungkinkan desainer membuat elemen 3D langsung dalam Figma tanpa perlu alat tambahan. Fig3D menggunakan real-time editing, kamu dapat melihat perubahannya langsung. Fig3D kompatibel dengan fitur asli Figma, sehingga integrasi dengan proyek yang sudah ada berjalan mulus. 3D Wave 3D Wave memungkinkan pembuatan efek gelombang 3D yang menarik dan dinamis. Kamu dapat menyesuaikan parameter seperti frekuensi, amplitudo, dan warna untuk menciptakan efek unik. Dirancang untuk integrasi mudah, 3D Wave berfungsi dengan desain Figma yang sudah ada tanpa memerlukan penyesuaian besar. Waitt… Sebelum lanjut, kira-kira kamu tau gak bedanya 3D Design dan Flat Design? Kalau 3D Desain itu: Dimensi: Menampilkan elemen dengan kedalaman dan volume, menciptakan kesan realistis.Fokus: 3D Design memberikan pengalaman yang terasa nyata dan visualisasi detail, sering digunakan untuk produk kompleks atau estetika modern. Sedangkan Flat Design: Dimensi: Elemennya flat, tanpa kedalaman, mengandalkan warna, bentuk, dan tipografi.Fokus: Flat Design menyederhanakan tampilan, memprioritaskan kejelasan dan minimalis. Ideal untuk UI/UX yang mementingkan kemudahan penggunaan dan kecepatan loading. Nah sudah tau kan bedanya 3D Design dan Flat Design? Yuk lanjut 😄 Simple 3D Simple 3D menawarkanmu interface yang mudah digunakan untuk menciptakan elemen 3D dasar dengan cepat dan efisien tanpa proses yang rumit. Selain itu, Simple 3D ini ringan dan tidak membebani Figma, sehingga tetap menjaga kinerja yang optimal. Hologram Shape PNG Pack #2 Dalam Hologram Shape PNG Pack #2 ini menyediakan berbagai bentuk hologram dalam format PNG berkualitas tinggi yang siap digunakan. Grafiknya memberikan efek 3D dan holografis yang menarik, dan dapat diimpor ke dalam proyek Figma dengan mudah tanpa perlu penyesuaian tambahan. Vector 3D Vector to 3D memungkinkan kamu untuk konversi objek vektor 2D menjadi elemen 3D dengan pengaturan fleksibel seperti perspektif, kedalaman, dan sudut. Plugin ini mempertahankan kualitas vektor asli sambil menambahkan dimensi 3D, memudahkan pengeditan dan penyesuaian lebih lanjut. Manfaat Elemen 3D dalam Desain UI/UX Meningkatkan Estetika Desain: Memberikan kesa modern dan profesional pada desainmu, sehingga meningkatkan kredibilitas dan citra brand.Membedakan desain dari pesaingmu dengan menawarkan visual yang unik dan menarik. Meningkatkan Pemahaman User: Menunjukkan hubungan antar elemen dengan lebih jelas, sehingga membantu pengguna dalam navigasi dan pengambilan keputusan. Memperluas Chance Desain Lebih Menarik: Memungkinkan desainer untuk membuat elemen interaktif yang menarik, seperti tombol 3D, animasi, dan efek visual.Memberikan peluang untuk menciptakan pengalaman pengguna yang lebih personal dan imersif, seperti avatar 3D dan lingkungan virtual. Penutup 💬 Elemen 3D dalam desain UI/UX memberikan banyak keuntungannya loh, seperti meningkatkan interaksi pengguna dan visualisasi yang lebih realistis. Kemajuan teknologi memudahkan implementasinya. Elemen 3D menjadi populer karena kebutuhan pasar akan pengalaman pengguna yang interaktif dan estetika modern. Meskipun begitu, tentu ada tantangan dalam performa dan kompleksitas. Elemen 3D kasih banyak kelebihan, menjadikannya investasi yang worth it bagi desainer. Dengan pemahaman dan penggunaan yang efektif, desainer dapat menciptakan UI yang menarik secara visual dan memberikan UX yang keren. Kamu bisa belajar lebih jauh tentang penggunaan 3D dalam desain UI/UX di kelas 3D BuildWithAngga dan bangun portfolio berkualitas! So, see you di kelas

Di era digital ini, memesan makanan online telah menjadi kebiasaan banyak orang! Hal ini membuka peluang bagi para pengusaha kuliner untuk menjangkau lebih banyak pelanggan melalui platform pemesanan makanan online. Namun, di antara banyaknya platform yang tersedia, memiliki UI desain homepage yang berkualitas menjadi kunci untuk menarik perhatian pengunjung loh. Homepage adalah halaman pertama yang dilihat pengunjung, dan desainnya harus mampu memberikan first impression yang positif dan mendorong mereka untuk menjelajahi lebih lanjut. Desain yang menarik dan informatif dapat membantu pengunjung menemukan menu yang mereka inginkan dengan mudah, membangun kepercayaan terhadap platform, dan pada akhirnya mendorong mereka untuk memesan makanan. Pada artikel kali ini, kita akan belajar cara membuat UI desain homepage aplikasi order makanan. Penasaran gimana cara membuat tampilan UI seperti ini? Yuk belajar bareng ;) 1. Siapkan Frame Langkah pertama, siapkan frame dengan ukuran W: 267 dan H: 529 dengan warna #F3F3F3 yaa 2. Siapkan Header, Search Bar dan Top Picks Pada bagian atas desain, kamu bisa masukan informasi alamat rumah dan ikon “Favorite” dan “Notification”. Buat “Search Bar” dengan mengikuti gambar di atas menggunakan auto layout. Masukan ikon search, kata “Search” dan ikon “Mic” lalu gabungkan dan jadi satu dalam bar. Buat “Top Picks” untuk menu-menu andalan resto dan bisa kamu ikuti pengaturan di atas. 3. Desain Container “Top Picks” Pertama, buat kotak dengan W: 130 dan H: 216 dan corner radius 15. Lalu untuk image makanan, kamu insert dulu kotak yang lebih kecil berukuran W: 130 dan H: 111 dengan corner radius atas kanan-kiri 15, serta sisi bawah kanan-kiri 0. Select kotak kecil tersebut dan masukan image makanan yang bisa kamu dapatkan dari unsplash 🙂 Untuk isi kotak pertama, kamu bisa ikuti untuk menu makanan, lokasi resto, harga dan rating makanan seperti panduan di atas. Masukan “+” ke dalam circle sebagao button untuk menambahkan menu ke keranjang pembelian. Ulangi hingga kamu membuat beberapa card menu makanan ya 😄 4. Container “Our Recommendation” Untuk kontainer kali ini, buat rectangle warna #FFFFFF dengan H:333 dan W: 151 serta corner radius 15. Buat lagi kotak yang lebih kecil untuk image makanan= W: 122 dan H: 135 dan corner radius 8Select kotak tersebut lalu masukan image makanan yang bisa kamu dapatkan di unsplash Untuk informasi pendukung lain Card ini, kamu bisa masukan nama menu, nama resto, lokasi resto, harga dan button untuk menambahkan pesanan. Ulangi sampai menjadi beberapa card untuk kontainer Our Recommendation 🎉 5. Membuat Bottom Navigation Bar Cara membuat Button Navigation Bar yang mudah adalah sebagai berikut: Masukan icon “Home”, “Keranjang”, “Saved” dan “Profile”Tambahkan informasi ikon seperti di icon home, berikan teks “Home”; untuk icon keranjang tambahkan tulisan “My Order” dan begitu selanjutnya untuk ikon-ikon lain.Ubah warna icon home dengan #627256 untuk menandakan bahwa kamu sedang berada di page “Home”Untuk ukuran icon, kita pakai di ukuran 24px dan size untuk informasi ikon di 9pxSelect ikon dan nama ikon lalu Shift A untuk mengaktifkan auto layout. Atur jarak antar ikon dan nama ikon.Untuk warna ikon lain yang sedang tidak running, kamu bisa gunakan #292D32 yaaSetelah masing-masing ikon sudah di auto layout, select semua icon dan beri auto layout lagi dan atur jarak seperti gambar di atas. Finishing! Masukan “Status Bar” di sisi paling atas desain dan “Home Bar” di bagian bawah desain 😄 Result ✨ Selesai! Dengan mengikuti step-step di atas, kamu bisa membuat tampilan homepag untuk aplikasi order makanan 🤩 Dengan desain yang tepat, platform pemesanan makanan dapat meningkatkan brand awareness, meningkatkan konversi, dan membangun loyalitas pelanggan. Yuk belajar UI/UX bersama di buildwithangga dan asah skill-mu! Tips: Untuk aset image, kamu bisa dapatkan di unsplashUntuk aset icon, kamu bisa dapatkan di IconsaxUntuk aset Status Bar iPhone kamu bisa dapatkan di sini yaa Goodluck! 🤩

Hello people with the spirit of learning! Di artikel kali ini, kita akan belajar cara membuat homepage aplikasi travel, membuat komponen dan ikon yang jelas, membuat button navigation bar serta auto layout dengan step-step sederhana yang bisa kamu ikuti. Ada beberapa alasan mengapa membuat homepage aplikasi travel yang menarik itu penting seperti: Meningkatkan first impressionMeningkatkan brand awarenessMembedakan diri dari kompetitor Jadi, mari kita mulai prosesnya! 😄 1. Siapkan Frame Pertama, siapkan frame. Di sini, kita akan pakai ukuran iPhone 14 & 15 Pro yaa dengan background #FFFFF (putih) dengan layout grid coloumns: Count= 4Margins= 30Gutter= 20 2. Header: Area Profile-mu Lalu kita mulai siapkan elemen-elemen dari awal! Kita buat dulu bagian profile-nya ya :) Profile picture: Buatlah lingkaran 48px dan masukan image foto pengguna“Hi Adnan”: Untuk nama, buat di ukuran 22px dengan Bold dan warna seperti di atas“Welcome 👋🏻”: Di ukuran 14px dengan warna seperti di atas, dan style MediumLingkaran Icon Notifikasi: 46px dengan ketebalan stroke dan warna seperti di atasIcon Notifikasi: 24pxUntuk icon kamu bisa dapatkan di sini yaa! 3. Membuat “Search Bar” Untuk mendesain “Search Bar”, kita akan gunakan auto layout. Pertama, masukan icon search dan kata “Search” dengan pengaturan seperti di gambar, lalu select keduanya dan Shift A (mengaktifkan auto layout) Lalu tambahkan juga icon “Filter” di 24px. Select icon tersebut dan select “Search” yang sudah di auto layout tadi maka ketiganya akan menjadi satu komponen dengan pengaturam seperti di atas. Eitsss sebelum lanjut, kenapa sih kita haru pakai auto layout? Menggunakan auto layout dalam UI/UX design itu penting karena: Responsiveness: Desainmu otomatis menyesuaikan ke berbagai ukuran layar.Efisiensi: Menghemat waktu dalam penyesuaian elemen desain.Consistency: Menjaga keseragaman layout.Scalability: Mudah mengelola desain kompleks.Collaboration: Memudahkan kerja tim dengan struktur yang sama.Adaptability: Memudahkan penyesuaian dengan konten dinamis. Auto layout membuat desainmu lebih fleksibel, efisien, dan mudah diatur. Ayo kita lanjut 😄 4. Desain “Featured” dan “See All” Ketik “Featured”: Poppins, Semibold dan 22px“See All”: Poppins, Medium dan mengikuti arahan pengaturan seperti di atas.Shift A: Select keduanya Featured dan See All lalu klik Shift A untuk mengaktifkan auto layout dan atur jarak antar kata. 5. Card Destinasi Wisata Untuk membuat Card ini, kamu bisa ikuti langkah-langkah di atas seperti: Buatlah Rectangle background dengan ukuran seperti di image.Tambahkan kotak untuk foto atau gambar destinasi wisata yang bisa kamu dapatkan dari unsplash.Untuk bagian “Rating”, kamu tinggal mengikuti setting-an di atas seperti size text, icon bintang dan lainnya menggunakan auto layout. 6. Elemen dalam Card Apa saja yang perlu di masukan ke dalam Card? Kategori Nama Tempat: Apakah ini Apartment atau Hotel? Kamu bisa membuat komponen ini dulu.“Apartment”: Aktifkan auto layout, ketik “Apartment” dengan warna, size dan style seperti di atas. Lalu Shift A untuk aktifkan auto layout-nya. Dengan begitu, “Apartment” memiliki bisa background.Tambahkan Corner Radius 15°Tambahkan informasi harga sewa per malam seperti contoh di atas.Gabungkan element “Apartment” dan “Price” dengan auto layout dan ikut instruksi pengarutan jarak di atas,Untuk bagian price, select “$1,900” dengan style Medium 14px, #2552E1 lalu select “/month” dengan style Medium 7px, #6D6F6C. 7. Informasi Destinasi Di dalam Card, tambahkan juga informasi destinasi lainnya seperti nama tempat wisata dan letaknya. Kamu bisa mengikuti langkah di atas seperti: Informasi “Lavender Manor” dengan style Medium, 14px , #232323 dan nama negara/kota dijadikan auto layout. Lalu atur jarak antar kata atas dan bawahnya.Untuk ikon location, ukurannya adalah 12px, #2552E1Untuk ikon like atau hati, gunakan di ukuran 18px Langkah Awal = Done 🎉 Ulangi step membuat Card dan Subheading di atas untuk membuat kontainer “Our Recommendation” yaa 🤩 8. Kategori Tempat Penginapan Untuk mempermudah user, kita akan membuat kategori penginapan yang bisa user akses hanya dengan satu kali klik seperti ingin di-filter untuk kelompok “Villa” atau “Apartment” atau semua kategori penginapan “All”. Buat button “All”: Press “T” untuk memasukan teks “All” lalu Shift A. Ikut pengaturan seperti di atas.Tekan “T” untuk masukan button “Villa”, “Apartment”, “Home” lalu masing-masing tambahkan auto layout untuk mengatur spacing button dan menambahkan stroke seperti di atas. 9. Card “Our Recommendation” Sebenarnya sama seperti Card sebelumnya, hanya perhatikan ada perbedaan size kotak dengan W: 156 dan H: 187. Untuk image, kalian bisa ambil dari unsplash yaa You’re close to the final step! Untuk tampilan homepage sejauh ini jadi seperti ini guys! Nah sekarang, apa yang kurang yaa? 10. Membuat Button Navigation Bar! Yap betul guys! Sekarang kita akan membuat “Button Navigation Bar”. Ada yang tau fungsinya apa? Yuk simak sebentar 😊 Memberikan akses cepat ke halaman utamaMembantu pengguna memahami struktur aplikasiMeningkatkan retensi penggunaMempercantik tampilan aplikasi Dan untuk membuat button navigation bar kali ini, kalian bisa mengikuti step-step di atas ya! Perhatikan size ikon dan warnanya serta informasi pendukung ikon. Berikan warna pada button yang sedang running semisal page “Home” Untuk icon, gunakan ukuran 24px dan font di ukuran 9 :) Jarak antar icon dan teks atas-bawah adalah 12px Result!! Tadaa! Setelah menambahkan button navigation bar ke dalam homepage, tampilan akan menjadi lebih menarik dan mudah digunakan oleh user! Pentingnya tampilan Card, elemen-elemen, button, dan button navigation bar yang jelas akan membuat user mudah tahu, aplikasi atau website apa yang sedang ia jalankan. Kesimpulan Membuat homepage yang menarik dan informatif untuk aplikasi travel mobile-mu itu kunci untuk meningkatkan first impression, konversi, dan brand awareness. Dengan mengikuti langkah-langkah yang telah dibahas, kamu dapat membangun homepage yang mudah dinavigasi, informatif, dan menarik bagi pengguna 🎉 Tips: untuk aset image seperti UI di atas, kamu bisa ambil gambar dari unsplash,kamu bisa gunakan icon dari Iconsax - 6,000 icons,sedikit tips untuk pemilihan font, kamu bisa gunakanPoppins: Poppins dirancang khusus untuk keterbacaan di layar, dengan proporsi huruf yang seimbang dan spasi antar huruf yang ideal seperti UI desain ini.Roboto: Font sans-serif modern yang mudah dibaca dan tersedia dalam berbagai bobot dan style.Montserrat: Font sans-serif yang unik dan menarik, dengan nuansa yang sedikit retro. Yuk join kelas ui/ux di buildwithangga untuk kamu yang ingin asah skill dan bangun portfolio berkualitas! 🥰

Membuat desain UI/UX yang menarik dan mudah digunakan membutuhkan berbagai elemen, seperti ikon, ilustrasi, foto, dan tipografi. Menemukan elemen-elemen ini secara gratis dan berkualitas tinggi bisa menjadi tantangan. Untungnya, ada banyak situs web yang menyediakan design assets gratis untuk UI/UX. Pada artikel kali ini, kita akan membahas 5 situs terbaik yang wajib dicoba para UI/UX desainer pemula, beserta keunggulannya! Craftwork Craftwork menawarkankamu berbagai macam aset desain UI/UX gratis dan berbayar, termasuk ikon, ilustrasi, foto, dan tipografi. Koleksinya dipilih dengan cermat dan memiliki gaya modern yang konsisten. Craftwork juga menyediakan file Figma dan Sketch agar kamu dapat dengan mudah menggunakan asetnya dalam proyek desainmu. Kelemahan Craftwork: Ketersediaan Konten: Koleksi ilustrasi Craftwork walaupun berkualitas tinggi, namun tidak seluas platform seperti Freepik. Hal ini dapat membatasi pilihan desainer untuk project tertentu.Harga: Craftwork menawarkan paket berlangganan bulanan dan tahunan, namun tidak ada pilihan pembayaran per ilustrasi. Hal ini bisa menjadi kurang menarik bagi desainer yang hanya membutuhkan ilustrasi hanya sesekali. Jangan khawatir karena craftwork juga memiliki keunggulannya seperti: Desain yang Unik: Craftwork menawarkan banyak desain unik dan kreatif yang tidak dapat kamu temukan di tempat lain lohUser-friendly: Platform Craftwork mudah digunakan dan dinavigasi, sehingga Anda dapat dengan cepat menemukan aset yang kalian cari.Opsi Gratis: Craftwork juga menyediakan banyak aset desain gratis yang dapat kamu unduh dan gunakan tanpa biaya! UI8 Sedangkan UI8 adalah platform yang menawarkan berbagai sumber daya desain premium seperti UI kit, wireframe, ikon, dan ilustrasi untuk membantu desainer mempercepat alur kerja, meningkatkan kualitas desain, dan menghemat biaya. UI8 juga memiliki komunitas desainer yang besar dan aktif untuk saling berbagi ide dan belajar. Berikut beberapa kelemahan UI8 yang perlu dipertimbangkan: Pilihan Tergolomh Terbatas: UI8 memiliki koleksi elemen desain yang lebih kecil dibanding platform lain seperti Freepik. Hal ini dapat membatasi pilihan bagi desainer yang mencari variasi dan spesifikasi yang lebih luas.Harga: UI8 menawarkan paket berlangganan dengan harga yang bisa dibilang relatif mahal, terutama untuk kamu sebagai pemula atau desainer dengan anggaran terbatas. Meskipun begitu, UI8 juga memiliki kelebihannya kok seperti: Kualitas tinggi: Semua aset desain di UI8 dibuat dengan kualitas tinggi dan profesional. Hal ini memastikan bahwa desain kamu pasti akan terlihat terbaik.Pilihan yang masih cukup beragam: UI8 memberikan dan menawarka berbagai macam pilihan aset desain, sehingga Anda dapat menemukan gaya yang sesuai dengan kebutuhanmuCocok untuk pemula dan profesional: UI8 mudah digunakan oleh pemula, tetapi juga memiliki fitur yang kuat untuk memenuhi kebutuhan profesional. getillustrations Lalu ada Getillustrations yang unggul dalam menyediakan koleksi ilustrasi vektor yang luas dengan lebih dari 8.500 images, kualitas tinggi yang dibuat oleh desainer profesional, harga terjangkau dengan berbagai pilihan paket, kemudahan penggunaan, dan layanan pelanggan yang baik. Platform ini menjadi sumber daya berharga bagi desainer yang membutuhkan ilustrasi berkualitas tinggi untuk proyek mereka 🤩 Meskipun Getillustrations menawarkan banyak keunggulan, platform ini juga memiliki beberapa kelemahan yang perlu dipertimbangkan: Harga: Getillustrations memiliki paket berlangganan bulanan dan tahunan, namun tidak ada pilihan pembayaran per ilustrasi. Hal ini bisa menjadi kurang menarik bagi desainer yang hanya membutuhkan ilustrasi sesekali.Opsi Pencarian: Fitur pencarian Getillustrations seharusnya bisa lebih baik. Pengguna mungkin mengalami kesulitan menemukan ilustrasi yang tepat dengan kata kunci tertentu. Ada pun kelebihan getillustrations seperti: Koleksi Besar: Lebih dari 8.500 ilustrasi vektor premium yang siap pakai.Format Lengkap: Tersedia dalam format AI, SVG, Figma, Sketch, Adobe XD, juga PNG.Lisensi Komersial Standar: Produk yang ada di sini bebas digunakan untuk proyek komersialmu 🤩 ls.graphics ls.graphics menarik perhatian para desainer dengan koleksi aset desain premium yang lengkap, kualitas aset tinggi yang terkurasi dengan cermat, harga terjangkau, kemudahan penggunaan, dan layanan pelanggan yang baik. Is.graphics ini membantu desainer menghemat waktu, meningkatkan kualitas desain, dan menghemat biaya, menjadikannya pilihan menarik bagi para profesional dan freelancer. ls.graphics pun memiliki kekurangannya juga loh seperti: Fitur Gratis Terbatas: Versi gratis Is.graphics hanya menyediakan akses ke jumlah terbatas aset desain. Pengguna yang ingin menggunakan lebih banyak aset perlu berlangganan paket premium.Harga: Is.graphics menawarkan paket berlangganan bulanan dan tahunan, dengan harga yang lebih mahal dibandingkan platform lain seperti Freepik. Sekarang mari kita lihat keunggulan ls.graphics ini! Beragam Format: Aset desain telah tersedia dalam berbagai format yang kompatibel dengan berbagai software desain.Kualitas Tinggi: Aset desain di LS.Graphics memiliki kualitas tinggi dan profesional.Update Teratur: ls.graphics selalu diperbarui dengan aset desain baru dan fitur-fitur menarik 😄 Freepik Freepik unggul dalam menyediakan koleksi aset desain yang luas dan berkualitas tinggi, dengan jutaan pilihan vektor, foto, ikon, dan template gratis dan premium loh. Platform ini sangat mudah digunakan, menawarkan harga terjangkau, dan memiliki komunitas desainer yang aktif untuk saling berbagi dan belajar. Freepik menjadi sumber daya penting bagi desainer untuk menyelesaikan proyek mereka dengan desain yang menarik! Freepik pun memiliki kelemahan seperti: Kualitas Konten: Meskipun Freepik memiliki banyak aset desain gratis, kualitasnya tidak selalu konsisten. Bahkan beberapa aset mungkin memiliki resolusi rendah atau terlihat tidak profesional.Iklan: Freepik gratis menampilkan iklan, yang dapat mengganggu dan mengganggu pengalaman pengguna. Sekarang mari kita lihat keunggulannya: Tersedia dalam berbagai bahasa: Freepik tersedia dalam berbagai bahasa, termasuk bahasa Indonesia.Aplikasi mobile: Freepik memiliki aplikasi mobile yang memudahkan Anda untuk mengakses aset desain dari mana saja.Punya beragam Pilihan: Freepik memiliki jutaan aset desain dengan berbagai macam style dan tema, jadi kamu dapat menemukan apa yang kamu sedang cari dan butuhkan. Kesimpulan 💬 Pada akhirnya, pemilihan platform yang ideal bergantung pada kebutuhan dan preferensi spesifikmu. Kalau kamu yang mencari elemen desain antarmuka pengguna, UI8 menjadi yang terdepan.Desainer yang membutuhkan banyak aset gambar akan menemukannya di Freepik.Untuk yang mencari ilustrasi buatan tangan dengan kualitas luar biasa, Craftwork menjadi pilihan utama.Desainer yang menginginkan elemen desain premium yang dikurasi dengan baik akan cocok dengan Is.graphics.Dan bagi yang mencari perpaduan ilustrasi-ilustrasi gratis dan premium, Getillustrations menjadi pilihan ideal. Apapun platform yang kamu pilih, designers dapat yakin bahwa mereka memiliki akses ke resouces yang kaya untuk meningkatkan karya kreatifmu dan meraih visi desain ✨ Kalau kamu tertarik memperdalam skill dan pengetahuanmu dalam UI/UX, kami menyediakan kelas-kelas gratis UI/UX di BuildWithAngga lho! Keep the spirit of learning and Good luck ;)

Hello people with the spirit of learning! ✨ Di artikel kali ini, kita akan membahas tentang bagaimana kita bisa mendapatkan akses fitur-fitur Figma Premium tanpa perlu berlangganan mengeluarkan uang! Loh emang bisa? Bisa dong! Gimana sih caranya? Yuk simak artikel ini sampai habis ya~ Dapatkan Figma Premium Gratis dengan Figma for Eduacation! Figma for Education adalah program yang dibuat khusus oleh Figma untuk mendukung user/siswa dan pengajar di bidang pendidikan desain. Program ini memberikan akses gratis ke fitur premium Figma bagi institusi pendidikan, sehingga memungkinkan kamu dan pengajar untuk memanfaatkantools canggih tanpa biaya tambahan. Ini adalah cara Figma untuk memperkaya pengalaman belajar dan mengajar dengan teknologi desain terkini. Manfaat Figma for Education User Figma for Education memiliki begitu banyak manfaat bagi dunia pendidikan, di antaranya: Meningkatkan Keterampilan Desain: Kamu dapat mempelajari dasar-dasar desain UI/UX, prototyping, dan interaksi pengguna melalui platform yang mudah digunakan dan intuitif.Dorong Kolaborasi: Figma memungkinkan kolaborasi real-time antar siswa dan guru, memfasilitasi pembelajaran kooperatif dan memecahkan masalah bersama!Tingkatkan Pemahaman Konsep: Visualisasi dan prototyping dengan Figma membantu siswa memahami konsep abstrak dan kompleks.Kembangkan Kreativitas dan Inovasi: Figma memberikan ruang bagi pelajar untuk explore ide-ide kreatif mereka dan mengembangkan solusi inovatif untuk berbagai permasalahan.Menyiapkan Student untuk Masa Depan: Keterampilan desain UI/UX yang diasah melalui Figma for Education sangat disukai dan diminati di berbagai industri, mempersiapkan siswa untuk karier yang sukses di masa depan 🤩 Figma Basics in Figma Lalu Apa Saja Kelebihan dan Kekurangan Figma for Education? Figma for Education menawarkan beberapa kelebihan dibandingkan Figma biasa, yaitu: Akses Gratis atau Diskon: Siswa, guru, dan institusi pendidikan dapat menggunakan Figma secara gratis atau dengan harga yang lebih terjangkau.Fitur Tambahan untuk Pendidikan: Figma for Education dilengkapi dengan fitur-fitur khusus yang dirancang untuk mendukung kegiatan belajar mengajar, seperti… integrasi dengan Google Classroom dan kemampuan untuk membuat kelas virtual.Sumber Daya dan Dukungan: Figma menyediakan berbagai resourches dan support untuk membantu siswa dan guru/pendidik dalam menggunakan platform Figma, seperti tutorial, panduan, dan forum komunitas. Kekurangan Figma for Education Meskipun menawarkan banyak manfaat, Figma for Education juga memiliki beberapa kekurangan, yaitu: Ketergantungan pada Koneksi Internet: Figma adalah platform berbasis web, jadi sudah pasti memerlukan koneksi internet yang stabil untuk digunakan.Keterbatasan Fitur Tertentu: Beberapa fitur Figma mungkin tidak tersedia dalam versi Education, atau mungkin memiliki batasan tertentu. Bagaimana Cara Mendaftar Figma for Education? Buka Chrome lalu search “figma/education” Pilih “Get Verified” untuk masuk dan akses ke Figma for Education Masuk ke akun Figma, di sini aku pilih “Continue with Google” dan masukan akun Google-mu. Atau masukan e-mail yang terdaftar. Jika kamu belum memiliki akun Figma, kamu bisa klik “Create one” Setelah itu, kamu akan diarahkan untuk mengisi data dan formulir untuk mendapatkan Figma Education. Kamu bisa mengikuti data di atas seperti pilih As a Student, Tipe institusi saat ini, hingga rencana sampai kapan kamu akan menggunakan Figma for Education ini. Saranku, pilih Bulan dan Tahun yang paling lama yaa! ^^ Sukses! Akun Figma-mu sudah terdaftar sebagai Figma Education. Kamu bisa pilih “New Design File” untuk memulai journey-mu dengan Figma Education! 🤩 Sekarang kamu bisa menikmati fitur-fitur Figma Premium tanpa bayar! Contohnya seperti Mockup untuk berbagai macam Frame, bisa edit file teman/team, menambahkan lebih dari 3 Page dalam 1 file dan masih banyak fitur lainnya! Kamu juga bisa buat team seperti yang dimiliki Professional Plan loh ✨ Apa Lagi Sih Bedanya dengan Figma Biasa? Figma for Education dan Figma biasa (gratis) memiliki beberapa perbedaan: Akses Fitur Premium: Figma for Education memberikan kamu akses gratis ke fitur premium yang tidak tersedia pada akun Figma gratis biasa.Lisensi Pengguna: Figma for Education khusus untuk institusi pendidikan, sedangkan Figma biasa tersedia untuk umum tanpa verifikasi pendidikan atau lainnya.Dukungan Pembelajaran: Figma for Education memfasilitasi lebih banyak sumber daya edukasi dan dukungan komunitas yang dirancang untuk belajar. Prototype in Figma Dengan menyimak informasi dan mengikuti langkah-langkah di atas, kamu dapat dengan mudah mendaftar Figma for Education dan mulai memanfaatkan platform desain yang luar biasa ini untuk meningkatkan proses belajar mengajarmu dan mendorong kreatifitasmu di dunia pendidikan 🥰 Tertarik belajar UI/UX lebih dalam? Yuk gabung ke kelas-kelas gratis UI/UX BuildWithAngga dan asah *skill-*mu untuk menjadi seorang desainer profesional 🥰

Hello people with the spirit of learning! Memilih font yang tepat untuk desain UI/UX adalah hal yang krusial. Font yang tepat dapat meningkatkan estetika, membantu navigasi pengguna, dan menyampaikan pesan brand dengan efektif. Dalam dunia desain UI/UX, pemilihan font bukan sekadar estetika. Tahun 2024 menghadirkan tren font yang lebih fokus pada keseimbangan, modernitas, dan profesionalisme. Dalam artikel kali ini, kita akan membahas 3 kombinasi font terpopuler yang siap mendominasi desain UI/UX di tahun ini, beserta keunikan dan alasan kenapa kamu harus menggunakannya! Poppins x Lora Poppins: Font sans-serif modern dengan design yang clean dan mudah dibaca. Poppins sangat cocok untuk body text, headings, dan UI elements. Huruf-hurufnya yang tegas dan seimbang menjadikannya pilihan ideal loh guys! Desainnya yang sederhana namun elegan membuat teks jadi easy to read di berbagai ukuran layar. Lora: Font serif klasik dengan sentuhan modern ini cocok untuk judul, subheading, dan elemen yang ingin ditonjolkan. Lora memiliki keunikan pada kontrasnya yang tebal-tipis yang halus dan melengkung. Memberikan gaya klasik namun kontemporernya memberikan sentuhan keanggunan pada teks paragraf. Take a Look for the Original Design by Shaynakit.com Dengan menggabungkan Poppins dan Lora, maka desain akan menciptakan keseimbangan visual antara modernitas dan tradisional. Poppins memberikan kesan yang bersih dan profesional, sementara Lora menambahkan keanggunan dan kemudahan membaca pada teks panjang. Nunito x Karla Nunito: Font sans-serif geometris dengan nuansa yang ramah dan approachable. Font ini sangat cocok untuk body text, UI elements, dan microcopy. Font ini terkenal dengan lekukan halus dan proporsi seimbang. Bentuk hurufnya yang bulat dan ramah memberikan nuansa bersahabat dan nyaman pada teks loh guys Karla: Font sans-serif condensed dengan desain yang kokoh dan profesional ini cocok untuk headings, subheadings, dan elemen yang ingin ditonjolkan. Lora dengan gaya grotesque yang lebih kuat dan karakter tegas. Meskipun begitu, Karla tetap mempertahankan kemudahan membaca yang tinggi. Take a Look for the Original Design by Shaynakit.com Pada kombinasi ini, kita dapat menghadirkan kesan modern dan minimalis. Nunito memberikan kesan ramah dan mudah dibaca, dan Karla memberikan kesan kuat dan profesional. Perpaduan ini sangat cocok untuk website dan aplikasi yang ingin menampilkan kesan modern dan profesional, seperti website startup, website agensi, atau aplikasi fintech. Sangat ideal untuk desain yang ingin menyampaikan informasi dengan jelas dan tetap mempertahankan nuansa yang hangat dan menarik. Alice x Inter Alice: Font serif klasik dengan desain yang indah dan elegan. Font ini cocok untuk judul, subheading, dan elemen yang ingin ditonjolkan. Font ini memilki tipografi klasik dengan sentuhan modern. Gaya elegan dan detail halus pada huruf-hurufnya memberikan kesan mewah dan canggih pada teks. Kombinasi font ini menghadirkan kesan modern dan minimalis. Nunito memberikan kesan ramah dan mudah dibaca, sedangkan Karla memberikan kesan kuat dan profesional. Perpaduan ini cocok untuk website dan aplikasi yang ingin menampilkan kesan modern dan profesional, seperti website startup, website agensi, atau aplikasi fintech dan juga kombinasi ini ideal untuk *design-*mu yang ingin menyampaikan informasi dengan jelas dan tetap mempertahankan nuansa yang hangat dan menarik 🤩 Inter: Font sans-serif modern dengan desain yang netral dan bersih membuat font ini cocok untuk body text, UI elements, dan microcopy. Inter dirancang khusus untuk UI. Desainnya yang sederhana, namun kuat dengan spasi antar huruf yang optimal, membuatnya sangat mudah dibaca di berbagai ukuran layar dan resolusi. Take a Look for the Original Design by Shaynakit.com Kombinasi font Alice dan Inter ini menghadirkan perpaduan antara klasik dan modern. Alice memberikan sentuhan elegan dan berkelas, sedangkan Inter memberikan kesan modern dan mudah dibaca. Sehingga perpaduan ini cocok untuk website dan aplikasi yang ingin menampilkan kesan timeless dan profesional, seperti website brand fashion, website museum, atau aplikasi edukasi dan travel. Kombinasi ini sangat sesuai untuk desain yang ingin menonjolkan kualitas dan kepercayaan. Kesimpulan 💭 Memilih kombinasi font yang tepat untuk desain UI/UX-mu bukan hanya soal estetika loh guys, tapi juga tentang meningkatkan experience pengguna. Di tahun 2024 ini, menghadirkan tren font yang fokus pada keseimbangan, modernitas, dan profesionalisme. Dalam kombinasi font Poppins dan Lora, Nunito dan Karla, serta Alice dan Inter ini, mereka menawarkan perpaduan sempurna antara kejelasan, estetika, dan kenyamanan. Dengan memahami keunikan dan kelebihan masing-masing, kamu dapat menciptakan desain yang menarik, fungsional, dan memenuhi kebutuhan pengguna di tahun 2024 dan seterusnya. So, Selamat mencoba! Tertarik belajar tipografi dalam UI/UX lebih jauh? Yuk join kelas-kelas gratis UI/UX di buildwithangga! Asah skill-mu dan bangun portfolio berkualitas 🥰