Akses kelas selamanya

Ambil Promo
flash sale
hamburger-menu

Tips User-Interface

Meningkatkan skills menjadi 1% lebih baik

Kelas 5 Software Terpopuler Untuk Mendesain Website Eye Catching di BuildWithAngga

5 Software Terpopuler Untuk Mendesain Website Eye Catching

Ketika memasuki dunia digital yang serba cepat ini, keberadaan sebuah website dengan desain yang memukau menjadi bagian yang tak terpisahkan dari keberhasilan bisnis. Tampilan visual yang menarik tidak hanya menahan mata pengunjung lebih lama di situs kamu, tetapi juga meningkatkan kemungkinan mereka untuk berinteraksi dengan konten yang kamu tawarkan. Untuk mencapai hal tersebut, diperlukan serangkaian alat desain web yang handal. Dalam tulisan ini, kita akan membahas lima aplikasi desain web terkemuka yang dapat membantu kamu membentuk sebuah website yang tak hanya memanjakan mata, tapi juga fungsional dan responsif. 1. Adobe XD Dalam dunia desain UI/UX yang dinamis, Adobe XD berdiri sebagai perangkat lunak yang menyederhanakan proses kreatif. Antarmukanya yang ramah pengguna dan fitur-fitur inovatif memungkinkan kamu untuk melampaui batasan desain tradisional dan melangkah ke wilayah eksperimental dengan prototype yang dapat berinteraksi. Fitur Utama yang Menjadikan Adobe XD Favorit di Kalangan Desainer: Kemampuan Prototyping: Mengubah ide desain menjadi prototype yang dapat diinteraksikan dengan lancar.Fasilitas Kolaborasi: Platform kolaboratif yang memudahkan tim untuk mengedit dan memberikan umpan balik dalam waktu nyata.Adaptasi Responsif: Alat yang memastikan desain kamu tampil prima di berbagai perangkat dan ukuran layar. 2. Sketch Dikembangkan khusus untuk MacOS, Sketch memberikan solusi desain antarmuka yang simpel namun penuh daya. Aplikasi ini memungkinkan kamu untuk menghadirkan kecanggihan tanpa kompromi melalui fitur-fitur yang dipoles untuk kebutuhan desain modern. Manfaat Menggunakan Sketch dalam Alur Kerja Desainmu: Penggunaan Simbol & Pustaka: Memfasilitasi pembuatan elemen desain yang konsisten dan mudah diulang.Dukungan Plugin yang Luas: Dengan beragam plugin, meningkatkan efisiensi dan kreativitas menjadi lebih mudah.Antarmuka yang Bersih: Tampilan yang minimalis dari Sketch mendukung fokus penuh terhadap detail desain. 3. Figma Figma meraih perhatian para desainer dengan model berbasis cloud yang menawarkan kemudahan akses dan kolaborasi. Figma mendobrak batas fisik dan memungkinkan desainer untuk berkolaborasi secara efektif, tidak peduli di mana mereka berada. Poin-Poin yang Membuat Figma Menjadi Alat Esensial untuk Desainer Modern: Kemampuan Kolaborasi Secara Real-time: Memungkinkan tim untuk bekerja bersama di satu rancangan secara bersamaan, tidak peduli jarak.Aksesibilitas Cloud: Mengedit dan mengakses desain dari mana saja, menawarkan fleksibilitas luar biasa.Penggunaan Komponen yang Efisien: Dengan komponen dan varian, Figma memudahkan pembuatan desain yang konsisten. 4. Webflow Berbeda dengan alat-alat desain lainnya, Webflow menawarkan keistimewaan dengan mengintegrasikan desain dan pengembangan web menjadi satu alur kerja yang mulus. Ini memungkinkanmu untuk langsung mengubah desain menjadi situs web yang berfungsi tanpa perlu menulis satu baris kode pun. Mengapa Webflow Menjadi Game Changer dalam Dunia Desain Web: Antarmuka Drag-and-Drop: Mudah digunakan untuk mendesain situs tanpa memerlukan latar belakang pemrograman.Animasi yang Menawan: Tambahkan dimensi ekstra pada situs kamu dengan animasi dan interaksi yang dapat disesuaikan.Hosting Terpadu: Kemudahan dalam menerbitkan situs langsung dari platform Webflow. 5. Affinity Designer Sebagai saingan dari suite Adobe, Affinity Designer menawarkan kemampuan desain vektor yang hebat dengan biaya yang lebih bersahabat. Ini adalah pilihan yang sempurna bagi mereka yang mencari solusi satu kali bayar dengan kemampuan yang tidak kalah dari pesaing berlangganan bulanannya. Alasan untuk Mengadopsi Affinity Designer sebagai Alat Desainmu: Kinerja yang Responsif: Berjalan mulus pada berbagai konfigurasi sistem, memastikan proses desain yang lancar.Model Pembayaran Satu Kali: Tanpa perlu khawatir akan biaya langganan berulang.Fitur Vektor yang Canggih: Alat-alat vektor yang lengkap memudahkan proses kreatif dari sketsa hingga hasil akhir. Kesimpulan Dalam merajut keindahan dan fungsi pada sebuah situs web, memilih perangkat yang sesuai bukanlah sekedar keputusan teknis, tetapi juga sebuah langkah kreatif: Adobe XD membuka jalan bagi desain interaktif yang canggih.Sketch memberikan solusi desain yang efektif dan intuitif khusus bagi pengguna MacOS.Figma menawarkan platform yang memudahkan kolaborasi antar desainer dalam realtime, memperkaya proses kreatif.Webflow mengubah paradigma dengan memungkinkan desainer untuk memvisualisasikan dan mengimplementasikan desain web secara langsung.Affinity Designer, memberikan kebebasan kepada pengguna untuk bereksperimen dengan desain vektor dan raster dalam satu lingkungan yang lancar. Bagi kamu yang berambisi untuk menguasai keahlian desain UI/UX dan ingin menambah pengetahuan dalam merancang situs web yang tidak hanya indah dari sisi estetika tetapi juga kaya akan pengalaman pengguna, sekarang adalah saatnya. Melalui beberapa kelas desain UI/UX di BuildWithAngga, kamu akan dipandu untuk menumbuhkan kemampuan ini. Saya mengundangmu untuk mengeksplorasi dunia desain, memperluas wawasan dan berkolaborasi untuk menciptakan karya digital yang tidak hanya berfungsi dengan baik, tapi juga memanjakan mata dan mudah digunakan oleh setiap pengguna. Semoga sukses, dan kita akan berjumpa di kelas untuk memulai petualangan desainmu.

Kelas 3 AI Canggih Untuk Bantu Para UI/UX Designer di BuildWithAngga

3 AI Canggih Untuk Bantu Para UI/UX Designer

Untuk menciptakan desain UI/UX yang hebat bukanlah tugas yang mudah. Para UI/UX designer wajib memahami kebutuhan pengguna dan merancang interface yang intuitif, menarik, dan fungsional. Teknologi kecerdasan buatan atau AI (artificial intelligence) telah menjadi pedoman yang berharga bagi para desainer. Dalam artikel kali ini, kami akan merekomendasikan Anda, tiga software AI yang telah membantu mengangkat standar desain UI/UX, memungkinkan pekerjaan yang lebih cerdas, cepat dan hasil yang lebih menakjubkan. 1. Khroma Khroma adalah software AI yang sangat berguna dalam pemilihan palet warna yang efektif. Software ini memahami psikologi warna dan preferensi Anda, kemudian menghasilkan kombinasi warna yang sesuai. Khroma membantu desainer dalam menciptakan tampilan yang menarik serta memudahkan pencarian warna yang cocok dengan cepat, mempercepat proses desain dan pengambilan keputusan warna untuk desain Anda. Ada pun beberapa keunggulan Khroma seperti: Generator SVG, yang memungkinkan Anda melihat bagaimana warna pilihan Anda dapat menyempurnakan gambarMenyalin kode hex untuk penerapan warna yang mudahKombinasi Warna yang Harmonis: Khroma membantu Anda menemukan kombinasi warna yang harmonis dan estetis dengan cepat. Ini sangat berguna untuk menciptakan palet warna yang menarik dan seimbang.Pemilihan Warna yang Terperinci: Khroma memberikan beragam pilihan warna dan mengizinkan desainer untuk menyesuaikan preferensi mereka. Anda dapat mencari warna berdasarkan skema warna tertentu, warna favorit, dan banyak lagi.Free dan dapat diakses secara online via Chrome 2. Framer Framer adalah software desain yang juga memanfaatkan teknologi AI. Dengan Framer, Anda dapat membuat prototipe interaktif dengan cepat dan mudah. Software ini memungkinkan Anda untuk menguji interaksi pengguna, animasi, dan alur kerja produk. Dengan bantuan AI, Anda dapat mengoptimalkan prototipe Anda dan mendapatkan wawasan yang worth-it tentang bagaimana pengguna berinteraksi dengan desain Anda. Framer mampu: Auto-Code: Software AI satu ini mampu menghasilkan kode secara otomatis berdasarkan desain yang dibuat oleh pengguna. Framer mampu mengenali pola dalam desain dan memberikan kode yang sesuai, sehingga mempercepat proses pengembangan prototipe dan mengurangi kesalahan manusia dalam penulisan kode.Auto-Animate: Fitur ini menggunakan AI untuk menghasilkan animasi yang mulus dan responsif. Software ini akan secara otomatis menganalisis perubahan setiap halaman atau elemen desain, dan menghasilkan animasi yang tepat untuk transisi antara perubahan tersebut.Komponen Siap Pakai: Framer menyediakan komponen siap pakai dan template yang memudahkan desainer untuk membuat prototipe. Ini mempercepat proses prototyping dan memungkinkan desainer untuk fokus pada ide kreatif mereka.Framer yang diakses secara free memiliki batasan fitur. Berbeda dengan Framer berbayar yang memiliki akses fitur lebih luas.Dapat diakses dengan Chrome 3. Qoqo Qoqo dapat membantu UI/UX designers untuk membuat user persona dan user journey map menjadi lebih instant. Untuk membuat user persona, Anda hanya tingal mengetik keyword pada kolom persona untuk keterangan status, umur, dan domisili. Lalu pada bagian context Anda bisa mengisinya tentang apa yang akan Anda buat dalam user persona. Contoh: Pada bagian "persona, masukkan keyword “A 32 years old career woman”Lalu di kolom context, masukkan keyword “is trying to find her business partner” lalu klik generate.AI secara otomatis menampilkan user persona lengkap dengan goals, needs, motivation, frustrations, tasks, dan opportunities berdasarkan persona dan context yang Anda berikan*.* Sama halnya dengan membuat user persona, saat membuat user journey map hanya perlu mengisi persona dan skenarionya, maka AI akan memberikan semua tahap yang dilalui pada user journey map. Dengan QoQo, Anda dapat menghemat waktu dan usaha dalam mengembangkan user persona dan user journey map yang relevan dan bermanfaat dalam proses desain UX Anda. Ada pun keunggulan QoQo yaitu: Bersaing dengan menghemat waktu tanpa memotong UX.Identifikasi Tantangan Desain: mampu mengidentifikasi elemen dan tantangan utama untuk ringkasan desain, memungkinkan desainer untuk memfokuskan upaya mereka dengan lebih efektif.Idealnya digunakan dalam kombinasi dengan riset pengguna Anda sendiri, yang merupakan bagian utama dari desain UXModel De-biasing: mengintegrasikan model de-biasing, mengurangi bias dalam hasil yang dihasilkan AI, dan memastikan wawasan yang lebih akurat dan inklusif.QoQo bisa diakses secara free, namun untuk beberapa fitur unggulan, Anda harus membayar langganan.Dapat diakses secara online via Chrome Kesimpulan Software AI seperti Khroma, Framer, dan QoQo telah membawa perubahan yang signifikan. Mereka tidak hanya mempermudah tugas para desainer, tetapi juga membantu dalam menciptakan pengalaman pengguna yang lebih baik: Khroma membantu dalam pemilihan warna yang efektif,Framer memungkinkan pembuatan prototipe yang interaktif,QoQo mempersingkat pembuatan user persona dan user journey map. Dengan teknologi AI semakin terlibat dalam workflow UI/UX, para desainer memiliki alat yang kuat untuk mencapai hasil terbaik dan meningkatkan kualitas desain mereka. Jika kamu tertarik mempelajari lebih lanjut, silahkan pelajari beberapa kelas gratis UI UX design yang tersedia di website BuildWithAngga dalam mempersiapkan karir lebih matang dan dapat bersaing dengan designer lainnya, good luck.

Kelas Passive Income Terbaik Untuk Para UI UX Designer 2024 di BuildWithAngga

Passive Income Terbaik Untuk Para UI UX Designer 2024

Mulai dari sekarang wajib membangun passive income sebagai penghasilan tambahan dan juga jaga-jaga apabila di masa depan kita terkena PHK dari perusahaan tempat kita bekerja. Sebagai UI UX designer, kita memiliki banyak peluang dalam mendapatkan penghasilan tambahan yang bahkan nantinya bisa jadi lebih besar dari gaji bulanan kita. Saran saya untuk memulai beberapa hal berikut, kamu wajib memiliki skills UI UX design yang baik terlebih dahulu misalnya sudah pernah menyelesaikan projek design mulai dari research, usability-testing, development, dan deployment. Namun apabila kamu belum memiliki skills tersebut maka bisa pelajari kelas-kelas gratisnya di website BuildWithAngga. Berjualan UI UX Design Kit Templates Sejujurnya banyak perusahaan yang sedang ingin mencoba bisnis model terbaru dan mereka biasanya mengejar cepat rilis hanya untuk memvalidasi apakah bisnis model tersebut berhasil dalam menumbuhkan perusahaan mereka. Banyak sekali UI UX designer dari perusahaan tersebut lebih memilih untuk membeli UI kit yang sudah dibuat oleh designer lainnya. Mereka nanti hanya perlu memodifikasi UI kit tersebut sesuai dengan kebutuhan projek yang ingin diselesaikan sehingga dapat menghemat waktu serta budget yang besar dibandingkan harus mendesain aplikasi dari awal. Kita bisa mulai memperbanyak template Figma dan menjualnya di berbagai website seperti Envato, Uplab, Shaynakit, UI8, dan website lainnya. Kita dapat menghasilkan ribuan dollar hanya dalam sekali kerja saja karena yang namanya digital product itu dapat dijual secara unlimited hanya dalam sekali kerja, well, mungkin hanya perlu kita maintain saja ya dari waktu ke waktu agar produk UI kit yang kita jual tetap laris. Mencoba Affiliate Marketing Produk Digital Apabila kita saat ini suka mendesain aplikasi yang menggunakan banyak foto makanan, tempat wisata, manusia, mobil, dan juga sebagainya. Maka kita bisa menjadi affiliator dari website penyedia foto tersebut seperti Shutterstock, Unsplash, dan lainnya. Kita hanya perlu mendesain template website sederhana yang akan dibagikan secara gratis kepada orang-orang, dan apabila mereka membutuhkan foto-foto pada template tersebut maka mereka bisa membelinya menggunakan link affiliate yang telah kita sediakan dengan baik. Agar hasil affiliate marketing lebih cepat dan banyak maka saya bisa sarankan untuk membuat beberapa template UI design yang eye-catching sehingga banyak designer lain tertarik untuk menggunakan template buatan kita. Menjual Tips UI UX Design UI UX design akan selalu berkembang pada setiap tahunnya, apa yang telah kita pelajari saat ini dan tahun depan akan terasa jauh berbeda. Para UI UX designer juga dituntut untuk terus mempelajari teknik-teknik design terbaru agar dapat memberikan kontribusi terbaik untuk perusahaan tempat mereka bekerja. Apabila saat ini kita seorang UI UX designer yang memiliki bakat dalam mengajar dan mempelajari hal baru dengan cepat, maka kita bisa mencoba untuk berjualan ilmu dan memberikan arahan terbaik untuk setiap murid kita. Ebook atau kelas online adalah kedua hal yang sering laku untuk saat ini, tapi kita perlu pastikan kembali ilmu dan cara penyampaian yang kita berikan sudah semaksimal mungkin agar kualitasnya juga terjaga. Menjual ebook atau kelas online membutuhkan usaha yang lebih besar dibandingkan UI kit atau affiiliate marketing, karena kita diwajibkan untuk terus update materi pada kelas dan ebook tersebut demi mengikuti perkembangan teknologi. Okaaaaay, berikut beberapa hal yang sejauh ini saya lakukan untuk meningkatkan passive income sebagai UI UX designer, perlu diingat bahwa kita harus benar-benar mencintai hal tersebut agar hasilnya juga lebih maksimal karena ada reputasi diri kita sebagai designer yang dipertaruhkan (bukan hanya mengejar uang saja). Kunjungi website BuildWithAngga untuk mendapatkan arahan UI UX design terbaru dan beberapa kelas gratis yang dapat meningkatkan karirmu 200% lebih cepat dibandingkan belajar sendirian, cobain dulu saja jika tidak percaya. Sampai jumpa pada artikel selanjutnya.

Kelas Mengenal Apa itu Hukum Proximity dalam Desain UI di BuildWithAngga

Mengenal Apa itu Hukum Proximity dalam Desain UI

Hi people with the spirit of learning! Dalam pengebangan produk digital tentunya sangat memperhatikan aspek desain seperti UI/UX. Sebagai seorang Desainer penting untuk memahami bagaimana aplikasi yang akan kita rilis dapat disukai pengguna baik dari segi tampilan dan pengalaman saat menggunakannya. Dalam artikel ini akan membahas apa itu hukum proximity dan bagaimana pengaruhnya terhadap pengguna. Mengenal Apa itu Hukum Proximity dalam Desain UI Hukum Proximity atau disebut dengan Hukum Kedekatan adalah prinsip desain grafis yang menyatakan bahwa elemen-elemen yang ditempatkan dekat satu sama lain cenderung dianggap sebagai kelompok yang berkaitan atau memiliki hubungan yang erat. Dalam desain user interface (UI), hukum ini berbicara tentang bagaimana penempatan elemen-elemen UI dapat mempengaruhi cara pengguna memahami dan memproses informasi. Hukum Proximity didasarkan pada asumsi bahwa pengguna cenderung mencari pola dan hubungan antara elemen-elemen visual. Contoh penggunaan Whitespace dalam hukum Proximity untuk memisahkan elemen menjadi dua pengelompokan yang berbeda Ketika elemen-elemen ditempatkan dekat satu sama lain, pengguna akan cenderung mengasosiasikan mereka sebagai satu kelompok dan menganggap bahwa mereka memiliki fungsi atau makna yang berkaitan. Sebaliknya, ketika elemen-elemen ditempatkan secara terpisah, pengguna mungkin menganggap mereka sebagai elemen yang terpisah dengan fungsi yang berbeda. Mengapa hukum ini penting dalam desain UI? Hukum Proximity penting dalam desain antarmuka pengguna (UI) karena memiliki dampak signifikan pada pemahaman dan interaksi pengguna. Berikut adalah beberapa alasan mengapa Hukum Proximity penting dalam desain UI. Pembuatan wireframe untuk desain UI 1. Memudahkan pemahaman informasi Dengan menempatkan elemen-elemen yang berfungsi serupa secara dekat satu sama lain, akan membantu pengguna dalam memahami hubungan dan hierarki informasi yang ada dalam interface. Pengguna akan mengasosiasikan elemen yang berdekatan sebagai kelompok yang berkaitan dan memiliki fungsi yang serupa. Hal ini mengurangi kebingungan dan mempermudah pemahaman informasi yang disajikan. 2. Mempercepat navigasi Hukum Proximity membantu pengguna dalam menemukan tindakan yang mereka cari dengan lebih cepat. Ketika elemen-elemen yang memiliki hubungan fungsi ditempatkan dekat satu sama lain, pengguna dapat dengan mudah melihat dan mengidentifikasi pilihan yang relevan. Ini mengurangi waktu yang dibutuhkan untuk mencari dan mempercepat proses navigasi pada produk. 3. Meningkatkan fokus pengguna Contoh hukum Proximity yang emnempatkan elemen terkait secara berdekatan Dengan menggunakan Hukum Proximity, desainer dapat mengarahkan perhatian pengguna pada elemen yang penting atau perlu diperhatikan. Dengan menempatkan elemen-elemen terkait dalam jarak yang dekat, Desainer dapat menciptakan kelompok visual yang menarik perhatian pengguna. 4. Meningkatkan pengalaman pengguna Dengan menerapkan Hukum Proximity secara konsisten dalam desain UI, pengguna akan lebih cepat memahami pola dan aturan dalam tata letak UI, sehingga meminimalkan kesalahan dan memperkuat interaksi yang efektif. Hal ini meningkatkan pengalaman pengguna secara keseluruhan dan meningkatkan kepuasan pengguna terhadap produk atau layanan yang disediakan. Bagaimana implementasi hukum Proximity dalam desain UI? Terdapat beberapa cara konkrit untuk menerapkan Hukum Proximity dalam desain UI. Berikut adalah beberapa contoh implementasinya: 1. Kelompokkan elemen terkait Contoh penerapan hukum Proximity pada tampilan UI Email Jika kita memiliki beberapa elemen yang berhubungan atau memiliki fungsi yang serupa, kita dapat mengelompokkannya secara visual. Misalnya, dalam sebuah aplikasi email, kita dapat mengelompokkan tombol-tombol yang terkait dengan tindakan pada email (misalnya, 'Kirim', 'Balas', 'Teruskan') di sekitar kotak pesan atau di panel samping. 2. Berikan jarak pada elemen yang tidak terkait Contoh penerapan hukum Proximity pada halaman artikel Elemen-elemen yang tidak berhubungan sebaiknya ditempatkan dengan jarak yang cukup jauh. Misalnya, pada halaman artikel atau blog, kita dapat memberikan jarak yang cukup antara paragraf-paragraf teks, judul, gambar, dan elemen lainnya. Ini membantu pembaca memahami struktur konten dengan lebih baik dan memudahkan mereka dalam membaca dan menyerap informasi. 3. Gunakan Whitespace secara efektif Contoh penerapan hukum Proximity dengan menggunakan Whitespace Whitespace adalah area kosong antara elemen-elemen di UI. Dengan menggunakan whitespace secara efektif, kita dapat menciptakan kelompok dan pemisahan visual antara elemen-elemen yang berbeda. Misalnya, dalam website, kita dapat menggunakan whitespace untuk memisahkan header dari konten utama atau untuk memberikan jarak yang jelas antara menu navigasi dan area konten. 4. Buat elemen terkait menyatu Contoh penerapan hukum Proximity pada UI Figma Jika terdapat elemen yang dianggap sebagai satu kesatuan, kita dapat mengelompokkannya dengan menggunakan elemen visual seperti bingkai atau latar belakang yang sama. Misalnya, dalam sebuah aplikasi grafis, dapat dikelompokkan alat-alat penggambaran seperti pensil, kuas, dan penghapus dengan memasukkannya dalam satu panel dengan latar belakang yang sama. 5. Pertimbangkan hirarki visual Contoh penerapan hukum Proximity pada website BuildWithAngga Selain menyatukan elemen-elemen yang terkait, kita juga perlu mempertimbangkan hirarki visual untuk mengkomunikasikan tingkat pentingnya atau hubungan yang lebih dekat. Gunakan ukuran, warna, dan penempatan untuk menunjukkan tingkat pentingnya elemen-elemen tersebut. Kesimpulan Nah itu dia penjelasan mengenai hukum Proximity dalam desain UI. Dengan memperhatikian hukum Proximity ini akan membantu pengguna mengenai cara menyajikan informasi dan fungsi yang terkait secara visual dan memperkuat struktur dan pengorganisasian elemen-elemen dalam desain UI menjadi lebih efektif. Kamu juga dapat mengikuti kelas terkait UI/UX desain untuk memperdalam pemahaman kamu dibidang ini. BuildWithAngga menyediakan kelas UI/UX Design: Gestalt Principle untuk kamu coba.

Kelas Pentingnya Konsistensi dalam Desain UI/UX di BuildWithAngga

Pentingnya Konsistensi dalam Desain UI/UX

UI/UX adalah hal yang sangat penting dalam pengembangan sebuah produk aplikasi. Pengguna akan betah berada di aplikasi lebih lama apabila ia merasa nyaman dengan tampilan interfacenya. Dalam prinsip atau preferensi membuat desain UI/UX tentunya akan berbeda untuk setiap orang. Pada artikel ini akan membahas pentingnya konsistensi dalam desain UI/UX produk aplikasi. Pentingnya Konsistensi dalam Desain UI/UX UI/UX merupakan akronim dari user-interface (UI) dan user-experience (UX). UI merujuk pada elemen visual yang digunakan oleh pengguna untuk berinteraksi dengan produk atau sistem. Ini mencakup tata letak halaman, tombol, ikon, warna, dan tipografi yang digunakan dalam desain. UI bertanggung jawab untuk menciptakan interface yang menarik, mudah dipahami dan digunakan. Proses pengembangan aplikasi dari tahap desain ke pengkodean UX mencakup keseluruhan interaksi dan pengalaman pengguna saat menggunakan produk atau sistem. Ini melibatkan aspek-aspek seperti kemudahan penggunaan, efisiensi, kepuasan pengguna, dan keterlibatan. UX merangkul aspek fungsional dan emosional pengalaman pengguna, termasuk navigasi, struktur informasi, dan responsivitas. Apa yang dimaksud konsistensi desain UI/UX? Konsistensi menjadi penting dalam proses desain karena memainkan peran dalam menciptakan pengalaman pengguna yang baik. Maka dari itu, seorang Desainer perlu untuk selalu mempertahankan konsistensi elemen pada UI aplikasinya. Konsistensi biasanya melibatkan penggunaan elemen desain yang seragam, seperti teks, button, dan object lainnya diseluruh komponen aplikasi. Pemilihan komponen untuk desain UI/UX Secara spesifik, konsistensi mencakup hal seperti gaya visual yaitu warna, ukuran, jenis huruf, ikon. Sedangkan konsistensi dalam interaksi yaitu ketika pengguna berinteraksi dengan tombol, menu, formulir, atau elemen interaktif lainnya. Selain itu pentingnya konsistensi tata letak yang berkaitan dengan penggunaan elemen seperti header, sidebar, footer, dan navigasi membantu pengguna memahami struktur informasi dan mencari konten dengan mudah. Sedangkan konsistensi konten berikaitan dengan penggunaan konten teks, seperti judul, paragraf, dan tautan. Mengapa konsistensi sangat penting dalam desain UI/UX? Kini kamu telah mengetahui sedikitnya mengenai apa itu konsistensi dalam desain UI/UX. Berikut alasan mengapa konsistensi menjadi salah satu hal penting dalam desain produk aplikasi. 1. Meminimalkan kebingungan pengguna Tampilan desain UI aplikasi mobile Konsistensi memungkinkan pengguna untuk dengan mudah memahami dan berinteraksi dengan UI aplikasi. Dengan menggunakan pola desain yang konsisten, pengguna dapat dengan cepat mengenali elemen dan tahu bagaimana cara menggunakannya. Ini mengurangi tingkat kebingungan dan meningkatkan traffic sebuah produk. Dengan menggunakan elemen desain yang konsisten, ini mempercepat pembelajaran pengguna dalam menggunakan aplikasi dan pengguna akan merasa lebih percaya diri dan dapat fokus pada tugas yang sebenarnya, tanpa terganggu oleh hambatan desain yang tidak konsisten. 2. Meningkatkan efisiensi penggunaan Tampilan desain UI aplikasi mobile Pengguna dapat memanfaatkan pengetahuan mereka sebelumnya tentang bagaimana sesuatu berfungsi dalam interface aplikasi yang sama. Mereka tidak perlu mempelajari ulang atau mencari tahu cara kerja elemen yang berbeda. Ini menghemat waktu dan usaha pengguna dalam beradaptasi dengan interface yang baru. 3. Meningkatkan kepercayaan pengguna Tampilan desain UI aplikasi pada tablet Kepercayaan pengguna adalah faktor kunci dalam kesuksesan produk. Dengan adanya konsistensi desain yang menciptakan rasa kepercayaan, pengguna cenderung lebih loyal dan mungkin merekomendasikan produk tersebut kepada orang lain. Mereka merasa yakin bahwa mereka dapat mengandalkan produk tersebut dalam memenuhi kebutuhan mereka. 4. Mencerminkan identitas brand Prototipe untuk desain UI/UX aplikasi Dengan desain UI/UX yang konsisten. maka memungkinkan merek untuk membangun identitas yang kuat dan dikenali oleh pengguna. Dengan mempertahankan konsistensi elemen desain seperti warna, gaya tipografi, dan ikon, pengguna akan mengaitkan desain dengan merek tersebut. Ini membantu dalam membangun hubungan emosional antara pengguna dan brand. 5. Meningkatkan efisiensi pengembangan Tahap pembuatan wireframe aplikasi Dengan mempertahankan konsistensi dalam desain UI/UX, pengembang dapat menggunakan kembali komponen, gaya, dan pola yang telah ada. Ini mengurangi kerumitan pengembangan, mempercepat waktu rilis, dan memungkinkan fokus pada inovasi daripada mengulang desain yang sama berulang kali. Kesimpulan Nah itu dia penjelasan mengenai konsistensi dalam UI/UX desain. Dengan menjaga konsistensi, pengguna dapat merasa nyaman, mudah beradaptasi, dan memahami dengan jelas cara menggunakan produk. Ini mengarah pada pengalaman pengguna yang lebih baik dan dapat meningkatkan kepuasan pengguna terhadap suatu produk. Kamu juga dapat mengikuti kelas terkait UI/UX desain untuk memperdalam pemahaman kamu dibidang ini. BuildWithAngga menyediakan kelas UI/UX Design: Gestalt Principle untuk kamu coba.

Kelas 5 Contoh Best Practice UI/UX Design Perlu Dipelajari di BuildWithAngga

5 Contoh Best Practice UI/UX Design Perlu Dipelajari

Kamu mungkin merupakan salah satu orang yang sedang atau tertarik menekuni bidang UI/UX design. Jika demikian, artikel ini adalah bacaan yang tepat untuk kamu yang ingin belajar lebih mendalam mengenai best practice UI/UX design. Sebelumnya mari kita berkenalan dengan UI/UX design. Apa sebenarnya UI/UX design itu? 5 Contoh Best Practice UI/UX Design Perlu Dipelajari UI/UX design merupakan akronim dari User Interface dan User Experience yang berarti antarmuka dan pengalaman pengguna. UI/UX design pada definisinya yaitu sebuah proses merancang antarmuka pengguna pada website, aplikasi mobile, atau produk digital lainnya. Tujuan dari UI/UX design adalah untuk menciptakan pengalaman pengguna yang intuitif, menarik, dan mudah digunakan. Penerapan UI/UX Design pada sebuah website maupun aplikasi mobile adalah faktor penting yang dapat mempengaruhi kesuksesan produk tersebut. Ketika pengguna merasa mudah dan nyaman menggunakan sebuah produk, mereka cenderung akan lebih sering menggunakannya. Oleh karena itu, dalam artikel ini akan dibahas mengenai 5 Contoh Best Practice UI/UX Design yang perlu dipelajari dalam pembuatan website dan aplikasi mobile. 1. Penempatan Konten yang Baik Proses perancangan UI/UX Design Salah satu hal yang perlu diperhatikan dalam penerapan UI/UX Design adalah penempatan konten yang baik. Konten yang disajikan pada sebuah website atau aplikasi mobile harus mudah diakses dan mudah dipahami oleh pengguna. Dengan begitu dapat mempengaruhi peningkatan pengalaman pengguna dan kesuksesan produk secara keseluruhan. Jika informasi dan fungsi ditempatkan dengan tepat, pengguna dapat dengan cepat menemukan apa yang mereka cari. Penempatan konten yang baik dapat membantu meningkatkan peringkat situs di mesin pencari. Jika informasi penting ditempatkan di lokasi yang tepat, halaman akan lebih mudah ditemukan oleh mesin pencari. Dalam hal mempelajari bagaimana cara menempatkan konten dengan baik, perlu memahami prinsip-prinsip desain UX dan mencoba berbagai tata letak untuk melihat apa yang paling efektif untuk produk kamu. 2. Penggunaan Warna yang Tepat Penggunaan warna yang tepat pada UI/UX Design Penggunaan warna yang tepat dapat membantu meningkatkan UX sebuah produk. Warna dapat mempengaruhi mood dan perasaan pengguna. Oleh karena itu, pemilihan warna yang tepat pada sebuah website atau aplikasi mobile adalah faktor yang penting. Warna juga membantu membangun merek dan meninggalkan kesan kuat untuk mengingat produk tersebut. Dengan warna yang konsisten pada setiap elemen, design akan membantu membedakan dengan produk sejenis lainnya. Dalam rangka untuk mempelajari cara menggunakan warna yang tepat, perlu memahami arti dan konotasi warna serta kontras yang tepat untuk memastikan keterbacaan. 3. Penggunaan Font yang Mudah Dibaca Penggunaan font pada UI/UX Design Pemilihan font yang tepat dapat membantu meningkatkan UX sebuah produk. Font menjadi aspek yang dapat mempengaruhi keterbacaan dan pengalaman pengguna sehingga font harus dipilh dengan hati-hati. Font yang mudah dibaca akan membuat pengguna lebih nyaman dan mudah memahami konten yang disajikan. Dalam pengaplikasiannya, font yang lebih formal dan serius dapat digunakan untuk merek yang berkaitan dengan bisnis atau keuangan, sementara font yang lebih bersahabat biasanya akan digunakan untuk merek yang lebih santai dan ramah. Pemilihan font yang baik juga membantu menyoroti elemen-elemen penting halaman aplikasi. Untuk mempelajari bagaimana memilih font yang tepat, kamu perlu memahami jenis-jenis font yang berbeda dan bagaimana font dapat digunakan untuk mencapai tujuan tertentu. 4. Navigasi yang Mudah Dipahami Tampilan navigasi UI/UX Design Navigasi yang mudah dipahami adalah salah satu best practice dalam UI/UX design karena dapat mempengaruhi pengalaman pengguna. Navigasi dapat membantu pengguna untuk menemukan konten dengan mudah. Navigasi yang konsisten di seluruh situs atau aplikasi membantu pengguna memahami bagaimana situs atau aplikasi berfungsi. Dengan menggunakan navigasi yang konsisten, pengguna dapat dengan mudah menavigasi halaman dan menemukan apa yang mereka butuhkan dengan cepat. Untuk mempelajari cara membuat navigasi yang mudah dipahami, perlu memahami prinsip-prinsip desain navigasi yang baik dan bagaimana navigasi dapat digunakan untuk memudahkan pengguna menavigasi situs atau aplikasi Anda. 5. Mobile Responsive Design Tampilan responsive UI/UX design pada tablet Dalam era digital yang semakin berkembang, penggunaan smartphone untuk mengakses website dan aplikasi mobile semakin tinggi. Oleh karena itu, mobile responsive design menjadi sangat penting untuk memastikan website dan aplikasi mudah digunakan pada layar smartphone. Bagaimana contoh penerapan UI/UX yang baik pada website ? Penerapan UI/UX design dapat kita temukan pada beberapa platform terkenal di Indonesia. Berikut penulis rangkum contoh platform yang menerapkan aspek best practice UI/UX design. Tokopedia Tampilan UI/UX design website Tokopedia Tokopedia adalah salah satu platform e-commerce terbesar di Indonesia yang memungkinkan para penjual untuk memasarkan dan menjual produk mereka secara online kepada konsumen di seluruh Indonesia. Tokopedia merupakan contoh penerapan UI/UX yang baik, dapat dilihat dari tampilannya yang jelas dan mudah dipahami. Konten-konten yang dibutuhkan pengguna juga disajikan pada bagian atas halaman website dengan jelas dan mudah diakses seperti pada fitur pencarian. Tokopedia juga telah mengoptimalkan desain nya untuk berbagai perangkat mobile maupun dekstop. Traveloka Tampilan UI/UX design website Traveloka Contoh penerapan yang baik dapat dilihat pada website Traveloka. Traveloka adalah sebuah perusahaan teknologi yang menyediakan platform booking online untuk tiket pesawat, hotel, paket liburan, dan layanan transportasi online di Indonesia. Traveloka menggunakan warna biru dan hijau yang menenangkan dan mudah dipahami oleh pengguna. Selain itu Traveloka memiliki navigasi yang mudah dipahami dengan menu utama yang jelas dan submenu yang terorganisir dengan baik. Amazon Tampilan UI/UX design website Amazon Amazon merupakan website e-commerce terbesar di dunia, dan memperhatikan pengalaman pengguna dengan sangat baik. Hal ini terlihat dari fitur pencarian yang sangat akurat, tampilan produk yang menarik dan informatif, serta fitur checkout yang mudah dan cepat. Amazon juga menyediakan berbagai opsi pengiriman dan pembayaran yang mudah, sehingga membuat proses pembelian menjadi lebih lancar. Bukalapak Tampilan UI/UX design website Bukalapak Bukalapak merupakan website salah satu platform e-commerce terbesar di Indonesia dan telah mengalami perkembangan pesat dalam beberapa tahun terakhir. Bukalapak telah menerapkan best practice UI/UX yang dilihat dari desainnya yang responsif sehingga dapat digunakan dengan baik di berbagai perangkat. Bukalapak juga menggunakan palet warna yang konsisten dan mudah dibaca, sehingga memudahkan pengguna untuk memahami dan menavigasi situs dengan efisien. Wireframe UI/UX Design Kesimpulan Pada intinya sebuah website atau aplikasi dapat dikatakan baik apabila dapat mempermudah pengguna untuk mendapatkan sebuah informasi atau dan juga mendapatkan tujuan yang mereka inginkan. Dengan penerapan design UI/UX yang baik akan membuat pengguna nyaman menggunakan aplikasi tersebut sehingga meningkatkan retensi pengguna. Berbagai platform terkenal baik itu e-commerce atau layanan jasa, akan menerapkan UI/UX design yang baik. Mereka memiliki satu tujuan yaitu agar pengguna lebih puas dalam hal pengalaman penggunaan produk membuat mereka akan lebih cenderung untuk menghabiskan waktu lebih lama pada platform. Sehingga diharapkan dapat meningkatkan tingkat penjualan untuk dapat memberikan keuntungan bisnis yang lebih baik. Kamu dapat belajar menerapkan best practice design UI/UX untuk meningkatkan kemampuan kamu yang akan dibutuhkan ketika kamu bekerja besama klien. Penulis merekomendasikan Kelas Online Gratis Learn Figma For Beginner untuk kamu yang baru sekali mendalami UI/UX design dan kelas Mastering Figma A to Z: E-Commerce UI Animation Design untuk kamu yang ingin meningkatkan skill kamu agar sesuai dengan industri saat ini.

Kelas 2023 UI UX Website Design Trends Untuk Dipelajari di BuildWithAngga

2023 UI UX Website Design Trends Untuk Dipelajari

UI UX designer sangat wajib untuk selalu up to date dengan design trend terbaru sehingga bisa memberikan hasil ui ux design yang bagus untuk klien atau perusahaan. Beberapa inspirasi design trend kali ini dapat kita mulai pelajari dan membuat eksperimen design tersebut sebagai seorang professional ui ux designer. 2023 UI UX Website Design Trends Untuk Dipelajari 1) Kombinasi layout, colorful, dan illustrations Menggunakan Illustration dengan warna yang kuat maka perusahaan dapat mengekspresikan emotional tentang bisnis mereka melalui illustration tersebut, sehingga pengunjung website dapat lebih mudah mengerti pesan yang disampaikan oleh website tersebut melalui ui ux design dengan kombinasi illustration. Kita dapat menggunakan Figma untuk membuat design yang sesuai dengan trend saat ini. colorful landing page with illustrations american landing page creative studio with illustration 2) Less content, large typography Design trend yang mengizinkan designer dari perusahaan tersebut untuk fokus kepada beberapa kata pada campaign marketing dan bisnis yang telah ditentukan, sehingga kalimat tersebut lebih mudah terlihat di mata pengguna website, tentunya ini dapat meningkatkan user experience design pada website. simple landing page japan travel website large typography website design 3) Brutalism Design Style Pada design trend ini semua terlihat besar dan keluar dari grid system pada umumnya, benar-benar brutal tampilannya namun tetap memberikan user experience design yang baik untuk pengunjung website. Figma juga sudah menerapkan design concept seperti ini dan hasilnya cukup memuaskan pengguna. brutalism layout website design ecommerce with brutalism design trend Kesimpulan dalam mengikuti design trend 2023 Sebagai professional ui ux designer, kita tidak harus terpaku oleh pola pikir kita pribadi, alangkah baiknya jika mengikuti design trend yang ada saat ini sehingga ketika klien meminta kita mengerjakan projek tersebut, maka kesempatan kita juga sebagai freelancer ui ux designer menjadi lebih luas lagi, good luck.

Kelas Rekomendasi Template Gratis Figma Untuk Projek Website Design di BuildWithAngga

Rekomendasi Template Gratis Figma Untuk Projek Website Design

Sebagai freelancer ui ux designer, terkadang klien minta kita mengerjakan projek website design atau mobile app design dengan cepat. Oleh karena itu kita dapat menggunakan template figma gratis yang tersedia di internet. Well, faktanya tidak boleh langsung menggunakan template figma begitu saja, berikut beberapa tips yang perlu dipelajari. Lisensi penggunaan template Template figma memiliki beberapa lisensi, kita wajib menemukan file template figma yang menggunakan lisensi 4.0 atau creative common untuk bisa digunakan sebagai projek komersil misalnya untuk projek klien freelance. Shaynakit menyediakan ribuan template figma website design dan mobile app design yang berlisensi 4.0. Rekomendasi template figma Kali ini saya akan share beberapa template figma terbaik dan paling banyak digunakan untuk projek latihan atau komersil, sehingga freelance website designer dapat bekerja lebih cepat lagi. Foodyar website design landing page restaurant website design Sebuah template figma yang cocok digunakan sebagai landing page bisnis makanan dan edukasi, menggunakan style trendy dengan komposisi layout menarik dan meningkatkan user experience. Silahkan download template Foodyar di sini. Store dashboard website design dashboard page for business transactions Klien sering meminta freelance website designer untuk design dashboard keperluan bisnis mereka, maka kita bisa coba gunakan template figma yang satu ini dengan informasi-informasi penjualan bisnis. Download template store dashboard di sini. Finding house landing page landing page for selling and buying houses Penjualan rumah di seluruh dunia meningkat drastis, agency mulai memperkerjakan freelance website design untuk mengerjakan marketplace jual beli rumah secara online dengan layout yang professional. Template figma yang satu ini cocok digunakan oleh kita untuk memulai projek jual beli rumah tersebut. Mulai download template figma Finding house di sini. Modifikasi template sebelum dijual Saya menyarankan freelance website designer menggunakan template figma yang berlisensi 4.0 dan wajib melakukan modifikasi terlebih dahulu sesuai kebutuhan projek freelance. Karena jika tidak maka design yang diberikan kepada klien akan serupa dengan hasil design dari designer lainnya yang menggunakan template figma tersebut. Berdiskusi dengan klien sebelum pakai template Jujur kepada klien bahwa kita akan menggunakan template figma yang tersedia, apabila klien tersebut butuh cepat selesai projeknya dan tidak keberatan, maka kita bisa gunakan template website design figma tersebut. Good luck.

Kelas 5 Hal Penting Perlu Dipelajari Sebelum Lanjut Belajar UI Design di BuildWithAngga

5 Hal Penting Perlu Dipelajari Sebelum Lanjut Belajar UI Design

UI Design adalah sebuah tampilan yang sering kita lihat pada aplikasi mobile misalnya aplikasi gojek, ovo, dana, tokopedia, netflix, dan aplikasi lainnya. Tugas kita sebagai UI Designer bekerja sama dengan developer dan UX designer untuk merancang aplikasi tersebut menjadi lebih menarik ketika digunakan oleh pengguna. Sebelum kita berkarir sebagai UI designer maka ada beberapa hal utama yang perlu kita pelajari sehingga hasil design yang kita buat nanti juga memberikan kualitas yang tinggi, terlebih lagi apabila kamu saat ini belum punya background design. Mulai Dari Belajar Graphic Designer Saya mengawali karir sebagai Graphic Designer untuk memperkuat beberapa komponen design seperti color, grid, layout, typography, dan lainnya. Maka dari itu kamu juga bisa memulainya dengan mempelajari komponen-komponen pada graphic design untuk membuat sebuah design guideline pada perusahaan tempat kamu bekerja nantinya. Mempelajari Color Combination Color memiliki peran penting pada sebuah design aplikasi, setiap aplikasi memiliki tujuan dan vision yang berbeda-beda maka dari itu mereka menggunakan warna yang berbeda, misalnya aplikasi keuangan menggunakan warna biru yang memiliki arti kepercayaan dengan loyalitas yang sangat tinggi. Mulai Belajar Typography Pengguna website atau aplikasi seperti diri kita, orang tua, dan saudara tentunya membaca beberapa informasi yang disajikan pada aplikasi tersebut, misalnya ingin membeli makanan martabak maka kita akan cari item yang berjudul martabak pada app tersebut. Oleh karena itu kita perlu mempelajari typography sebagai pondasi utama UI designer sehingga kita bisa memilih jenis font yang sesuai dengan tema aplikasi yang kita design ke depannya, beda tema maka beda jenis font. Belajar Tata Letak (Layout) Setelah kita mempelajari color dan typography maka kita bisa masuk kepada layout yang di mana kita akan belajar menata judul, harga, foto produk, dan lainnya pada posisi yang benar. Kita juga bisa mulai mengenal istilah-istilah UX sehingga melakukan proses layouting menjadi lebih mudah untuk menciptakan aplikasi dan website yang menarik dan mudah digunakan. Membuat MoodBoard Design Kita butuh sebuah moodboard yang berisi inspirasi-inspirasi design yang akan kita gunakan sebagai benchmark dari design aplikasi kita nantinya, oleh karena itu kita perlu belajar memilih referensi yang tepat, tidak harus banyak tidak juga sedikit, intinya cukup dari segi warna, illustration, layout, dan interaction (animation). Kita bisa menggunakan beberapa software design gratis seperti Figma, Miro, Dribbble, Adobe XD, dan software lainnya untuk mulai pembuatan moodboard dan melakukan pembelajaran utama kita sebagai UI designer.

Kelas Cara Menggunakan Auto Layout pada Figma di BuildWithAngga

Cara Menggunakan Auto Layout pada Figma

Hello people with the spirit of learning! Gimana progres belajar kalian sejauh ini? Di sini ada yang sudah tahu cara menggunakan Auto Layout pada Figma? Kalau belum, yuk, kali ini kita akan belajar secara singkat cara menggunakan Auto Layout Figma– sebuah fitur yang memudahkan kamu dalam proses design! Auto Layout memiliki fungsi membuat frame pada UI design kalian menjadi lebih dinamis. Sebagai contoh, kalian tidak perlu mengubah ukuran frame untuk mengikuti isi teksnya karena frame akan menyesuaikan. Alias, Auto Layout memungkinkan kita membuat component yang responsif. Masih banyak fungsi Auto Layout yang memudahkan kamu di Figma menjadi lebih praktis. Oleh Karena itu, Auto Layout merupakan fitur unggulan di tools ini. Pada latihan kali ini, kita akan membuat daftar menu makanan. 1) Siapkan Element-nya Mari kita siapkan beberapa elements seperti Shape lingkaran, Text dan siapkan plugins bernama “Unsplash” untuk mengambil image. 2) Memberi Text dan Shape Caranya, pada bagian Toolbar, pilih “T” (Text) dan ketik nama menu makanan yang kamu mau. Lalu di sampingnya, pilih Shape dan pilih Ellipse untuk si bentuk lingkaran. Tekan Shift sembari menarik kursor sehingga membentuk bentuk lingkaran yang sempurna. 3) Mengaktifkan Auto Layout Select semua elements dan tekan Shift+A untuk mengaktifkan Auto Layout. Di bagian sidebar, ubah padding menjadi 10 dan spacing between items menjadi 20. 4) Mengaktifkan Fill Container Aktifkan fill container. Caranya, di bagian “Frame” pada sidebar, pilih fill container agar text tetap mengikuti container saat ingin merubah ukuran container. 5) Masukan Image dengan Plugins Klik shape lingkaran pada menu namun pastikan kamu sudah install plugins “Unsplash”. Jika sudah, klik kanan ➡️ ”Plugins” ➡️ “Unsplash”. Search image yang kamu mau lalu pilih dan tunggu hingga image muncul di dalam shape. Ulangi sampai terlihat menjadi list menu makanan yaa 😊 Kamu hanya perlu men-duplicate menu yang sudah ada dan dengan aktifnya Auto Layout, kamu tidak perlu lagi mengubah pengaturan ukuran/jarak/jenis font satu persatu lagi karena nanti menu yang kamu duplicate akan menyesuaikan pengaturan dari menu sebelumnya. Selamat! Kamu sudah bisa menggunakan Auto Layout pada Figma 🎉 p.s: untuk menghapus Auto Layout, cukup klik tanda “+” pada bagian Auto Layout di side bar menjadi tanda “-”. Dan untuk membuat UI Design di atas, kita tinggal menambahkan container daftar menu makanan ke dalam frame baru yang sudah kita design yaa😉 . Proses Membuat UI Design List Menu 1) New Frame Pada bagian toolbar, kita pilih Frame lalu atur ukuran frame pada sisi sidebar dengan W: 375 dan H: 781. 2) Background Menu Untuk background, kita pakai warna putih. Kembali lagi ke toolbar, pilih shape lalu pilih rectangle dengan ukuran W: 375 H: 259. Atur posisi ke Align horizontal center dan Align center. 3) Image for Background Menu Seleksi shape tadi dan masukan plugins “Unsplash”. Seach image “Dining” untuk mendapatkan image restoran seperti UI di atas. 4) Cara Membuat Gradasi Image Duplicate Image dengan menekan shortcut Shift+D. Pada image kedua, kita ke Fill pada sidebar dan pilih Solid maka akan muncul beberapa opsi. Setelah itu kita pilih Linear. Ubah opacity warna pada kotak pertama menjadi 0% dan kotak kedua 100%. Drag kotak pertama ke kanan hingga berada di tengah. Pastikan juga image ini berada di atas shape pertama. (Caranya, kalian bisa klik kanan lalu Bring to front.) 5) Judul Restaurant Untuk memberi judul resto, ketik nama resto sesuai imajinasi kalian dengan ketentuan font yang bebas juga. Di sini, aku pakai Poppins dengan size 16px. font style Semibold. Letakan di atas dengan jarak atas 84px dan kiri 44px 6) Bottom Navigation Bar Untuk icon Home, Search & Profile; kita bisa dapatkan dengan install plugin “Iconify” Select icons Aktifkan Auto layout (Shift+A) Atur menjadi Horizontal direction di sidebar Spacing between items: 88px Fill dan pilih warna yang kamu mau Ubah ukuran container menjadi W:376 H:52 Corner radius menjadi 40px untuk atas dan bawah. Pilih container Navigation bar bawah dan atur posisi dengan memilih Align horizontal center dan Align bottom pada sisi sidebar. 7) Upper Navigation Dapatkan icon Back dan Share dari plugin “Iconify” Beri jarak atas 48px dan kiri 40px Tebalkan icons dengan cara pilih “Stroke” pada bagian sidebar dan ubah menjadi 2. Begitu juga dengan icon bintang, kamu bisa dapatkan di plugin “Iconify” dan fill icon sesuai warna yang kamu inginkan. Terima kasih sudah membaca artikel ini yaa! Jika kalian ingin tahu lebih dalam tentang peng-aplikasian Auto Layout, kami menyediakan banyak kelas yang membahas tentang Auto Layout pada Figma lohh! Sebagai contoh, kamu bisa mengikuti dulu kelas gratisnya yaitu kelas freemium “UI Style Guide”. Selamat belajar dan mencoba teman-teman! 📚 Link plugins : Unsplash https://www.figma.com/community/plugin/738454987945972471/Unsplash Iconify https://www.figma.com/community/plugin/735098390272716381/Iconify