Tips User-Interface

Taukah kamu soal user journey map dalam UI/UX Design? User Journey Map sering digunakan dalam proses perancangan desain khususnya untuk meningkatkan user experience dalam tampilan suatu desain. Yuk sebagai desainer kita kenalan dengan user journey map. Menurut buku "Desain Interaksi: Fundamental", user journey map tidak hanya sekadar representasi visual dari perjalanan pengguna saat berinteraksi dengan suatu produk, proses, atau sistem, melainkan juga sebuah alat yang sangat berharga dalam mengeksplorasi dan memahami pengalaman pengguna secara menyeluruh. Dengan user journey map, kamu dapat menggambarkan setiap langkah yang diambil oleh pengguna dari awal hingga akhir, serta melihat bagaimana interaksi tersebut berkembang dari waktu ke waktu. Hubungan yang erat antara user journey map dan model konseptual interaksi menawarkan kemungkinan untuk menyelami lebih dalam bagaimana pengguna berinteraksi dengan produk atau sistem interaktif, sehingga membantu dalam merancang pengalaman yang lebih memuaskan dan efektif. Tujuan dari penggunaan user journey map sendiri adalah untuk : Merancang proses interaksi suatu produk untuk memberikan pemahaman yang lebih mendalam tentang bagaimana pengguna berinteraksi dengan produk tersebut dari awal hingga akhir, memungkinkan perancang untuk mengidentifikasi titik-titik kritis, preferensi, dan kebutuhan pengguna yang harus dipenuhi dalam setiap tahap perjalanan, sehingga memungkinkan pengembangan solusi yang lebih terarah dan berorientasi pada pengguna.Mencari atau mengidentifikasi suatu masalah untuk memberikan pandangan yang lebih holistik tentang pengalaman pengguna dalam interaksi dengan produk atau sistem, sehingga memungkinkan kamu untuk mengeksplorasi setiap fase secara rinci, mengidentifikasi titik-titik kebingungan, frustrasi, atau hambatan yang mungkin mereka alami, serta menemukan peluang-peluang untuk memperbaiki dan meningkatkan pengalaman pengguna secara keseluruhan.Mengetahui kebutuhan pengguna terhadap suatu sistem untuk memberikan wawasan yang komprehensif tentang bagaimana pengguna berinteraksi dengan sistem tersebut dari awal hingga akhir, memungkinkanmu untuk mengidentifikasi dan memahami setiap tahap perjalanan pengguna secara mendalam, menganalisis preferensi, harapan, dan kebutuhan mereka, sehingga memungkinkan perancang untuk mengembangkan solusi yang sesuai dan efektif untuk memenuhi kebutuhan pengguna dengan lebih baik..Mengevaluasi suatu produk untuk memberikan pemahaman yang lebih dalam tentang pengalaman pengguna dari mulai awal hingga akhir, sehingga memungkinkan kita untuk menyelidiki setiap fase perjalanan pengguna secara komprehensif, menganalisis tanggapan, persepsi, dan tingkat kepuasan mereka terhadap produk tersebut, sehingga kita dapat mengidentifikasi area-area yang memerlukan perbaikan atau penyempurnaan, serta mengembangkan strategi yang lebih efektif untuk meningkatkan kualitas produk secara keseluruhan. Sumber Foto: Interaction-Design.ORG Pada umumnya terdapat informasi yang dipetakan dalam user journey map, yaitu: Perjalanan pengguna (journey) adalah bagian penting dari informasi yang kamu temukan dalam user journey map, yang memberikanmu gambaran menyeluruh tentang langkah-langkah atau interaksi yang dijalani oleh pengguna dalam mengakses atau menggunakan produk atau layanan tertentu.Tujuan dan harapan pengguna (goals & expectations) adalah elemen kunci yang dicerminkan dalam user journey map, yang memberikan gambaran tentang apa yang diinginkan atau diharapkan oleh pengguna dalam setiap tahap perjalanan mereka.Dalam konteks informasi yang dipetakan dalam user journey map, alur proses (process flow) adalah representasi yang memberikanmu gambaran detail tentang langkah-langkah atau urutan interaksi yang diikuti oleh pengguna dalam menjelajahi atau menggunakan suatu produk atau layanan.Titik sentuh (touchpoint) adalah salah satu elemen yang kamu temui dalam informasi yang dipetakan dalam user journey map, yang menandai titik-titik atau momen-momen spesifik di mana pengguna berinteraksi dengan produk atau layanan dalam perjalanan pengguna.Pengalaman (experience) adalah komponen penting yang kamu temui dalam informasi yang dipetakan dalam user journey map, yang memberikanmu gambaran lengkap tentang bagaimana pengguna berinteraksi dengan produk atau layanan dalam setiap tahapan.Deskripsi pengalaman positif dan negatif adalah aspek yang kamu temukan dalam informasi yang dipetakan dalam user journey map, yang memberikanmu pemahaman mendalam tentang perasaan, reaksi, dan persepsi pengguna terhadap interaksi dengan produk atau layanan selama perjalanan.Pikiran dan perasaan (think and feel) merupakan elemen yang kamu jumpai dalam informasi yang dipetakan dalam user journey map, yang memberikanmu wawasan tentang pemikiran dan emosi yang dialami pengguna dalam setiap tahap perjalanan mereka saat berinteraksi dengan produk atau layanan tertentu. Untuk membuat user journey yang lebih menarik dan memikat, penting untuk mengidentifikasi pengguna melalui user profiling. Setiap pengguna akan diberikan tugas atau tujuan spesifik yang harus dicapai di dalam website, seperti membeli sebuah produk, mencari waktu pembukaan toko, atau membatalkan debit di bank. Pengguna memiliki kebutuhan yang harus dipenuhi, dan langkah-langkah yang diambil untuk memenuhi kebutuhan tersebut dikenal sebagai user journey. Dalam user journey ini, kamu dapat menjelajahi pengalaman yang sesuai dan relevan bagi pengguna, membawa mereka melalui perjalanan yang memuaskan dan bermakna dalam mencapai tujuan mereka. Bentuk dari user journey sangatlah beragam dan menghadirkan banyak ketidakpastian. Umumnya, tampilannya disesuaikan dengan audiens yang akan melihatnya; contohnya, jika kamu menggunakan user journey untuk berkomunikasi dengan developer, itu mungkin dibentuk hanya dengan tulisan, sementara jika kamu menggunakan untuk berkomunikasi dengan executive committee, user journey mungkin diilustrasikan dalam setiap langkahnya seperti buku komik. Oleh karena itu, bentuk user journey sangat bergantung pada tingkat kreativitas pembuatnya dan harus disesuaikan dengan situasi yang ada. User journey merupakan gabungan dari dua instrumen yang sangat kuat, yaitu story telling dan visualisasi, yang bertujuan untuk memberikan gambaran yang lebih mendalam dan jelas kepada kamu dan timmu tentang bagaimana pengguna berinteraksi dengan produk atau layanan kamu, serta membantu dalam memahami dan mendefinisikan kebutuhan pelanggan dengan lebih baik. Pembuatan user journey dapat memberikan banyak keuntungan, antara lain: Demonstrasi visi dari proyek kepada kamu sangat penting. Penggunaan user journey merupakan cara yang efektif untuk mengkomunikasikan kepada stakeholders apa yang akan dicapai dan memberikan contoh konkret dari bentuk masa depan tentang apa pun yang sedang didesain. Bersama dengan persona, user journey dapat menjadi salah satu output kunci dari tahap pengumpulan kebutuhan (requirement gathering stage) di awal sebuah proyek.Memahami user behavior atau perilaku pengguna adalah tahap yang krusial dalam pengembangan produk atau sistem. Penggunaan user journey membantu kamu untuk mendapatkan pemahaman yang lebih mendalam tentang bagaimana cara pengguna berinteraksi dengan sistem dan apa yang diharapkan dari interaksi tersebut, memungkinkanmu untuk merancang solusi yang lebih sesuai dan memuaskan bagi pengguna.Mengidentifikasi possible functionality di level tinggi merupakan langkah awal yang penting dalam pengembangan produk atau sistem. Penggunaan user journey memberikan pemahaman yang mendalam tentang kebutuhan functional untuk menjalankan tugas dengan memahami key tasks dari apa yang diharapkan untuk dilakukan, memberikan kamu wawasan yang lebih jelas untuk merancang fungsionalitas yang sesuai dan memadai.Mendefinisikan taxonomy dan tampilan (interface) adalah langkah penting dalam proses pengembangan produk atau sistem. Penggunaan user journey memberikan pemikiran yang lebih mendalam tentang jenis taxonomy yang dapat membantu tugas dan seperti apa jenis tampilan yang dibutuhkan pengguna untuk menyelesaikan tugas tersebut, membantu kamu merancang struktur dan antarmuka yang optimal sesuai dengan kebutuhan pengguna. Kamu, sebagai pengguna, juga dapat memperkaya pengalamanmu dengan memahami perjalanan pengguna (user journey map) dalam interaksi dengan aplikasi keuangan. Dengan memahami langkah-langkah dan tantangan yang dihadapi pengguna, kamu dapat menciptakan pengalaman yang lebih memuaskan dan efisien. Mau coba buat desain keren lainnya dengan font-font di atas? Bisa banget! Yuk, kepo-in kelas-kelas UI/UX design di BuildWithAngga! Kamu bisa mengasah skill dan menambah portfolio yang lebih berkualitas lhoo 🤩

Apakah kamu pernah merasa sulit mencari gambar, ilustrasi, atau foto yang sesuai dengan kebutuhan desainmu? Unsplash, sebuah platform berbagi gambar, ilustrasi, font, template, dan foto. Beberapa dari item tersebut bahkan dapat kamu miliki secara gratis! Namun, akses melalui website dan proses pengunduhan terlebih dahulu seringkali menghabiskan waktu dan membingungkan. Kabar baiknya, saat ini Unsplash hadir dalam bentuk plugin Figma yang mempermudah kamu untuk memasukkan foto langsung ke dalam desainmu. Dengan begitu, proses desainmu akan menjadi lebih efisien dan kreatif, tanpa harus repot mencari-cari gambar secara manual. Cara menggunakan plugin unsplash Tahap 1: Cari unsplash plugin dan run plugin Cara menggunakan plugin Unsplash sangatlah mudah. Tahap pertama adalah mencari plugin Unsplash pada bagian resources di Figma. Setelah kamu menemukannya, langkah selanjutnya adalah dengan mengklik opsi "run plugin"untuk mengaktifkannya. Tahap 2: Buka unsplash plugin Tahap kedua setelah menemukan plugin Unsplash di bagian resources adalah membukanya. Pertama-tama, kamu perlu membuka plugin Unsplash agar bisa mengakses semua fitur yang disediakan. Setelah plugin terbuka, kamu akan diperlihatkan dengan berbagai opsi dan fitur yang memungkinkan kamu untuk menelusuri ribuan gambar berkualitas tinggi. Tahap 3: Pilih frame atau objek yang mau dimasukan foto Pilih salah satu objek atau frame yang akan dimasukkan foto. Dengan langkah ini, kamu dapat langsung menempatkan foto yang telah kamu pilih ke dalam frame yang telah dipilih sebelumnya. Dengan memilih objek atau frame tertentu, kamu dapat mengatur secara tepat di mana foto tersebut akan ditempatkan dalam desainmu. Tahap 4: Cari dan pilih foto yang akan digunakan Cari foto yang ingin kamu gunakan dan pilih foto tersebut. Dengan melakukan langkah ini, foto akan secara otomatis masuk ke dalam frame yang sudah kamu pilih sebelumnya. Proses ini memudahkan kamu untuk menemukan dan menerapkan foto yang sesuai dengan kebutuhan desainmu. Selain itu, apabila kalian tidak memilih frame untuk foto terlebih dahulu, maka gambar akan tetap keluar di luar framedengan ukuran sebenarnya, yang mungkin dapat mengakibatkan gangguan dalam tampilan desain dan menurunkan kesan profesionalitasnya. Oleh karena itu, penting untuk memastikan bahwa setiap elemen visual termasuk foto, ditempatkan dengan cermat dalam frame yang tepat, sehingga keseluruhan desain tetap terorganisir dan terlihat estetis. Unsplash: Membantu desainer dalam mencari gambar 📷 Dari beragam koleksi gambar yang tersedia secara gratis hingga kemampuannya dalam menyediakan inspirasi visual untuk berbagai proyek desain, Unsplash menjadi sumber daya yang sangat berharga bagi para desainer dalam mencari gambar yang sesuai dengan kebutuhan mereka. Mau mencoba menggunakan Unsplash untuk mendapatkan gambar-gambar berkualitas tinggi untuk desainmu? Yuk, temukan lebih banyak sumber daya dan inspirasi desain gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design , kamu dapat mengasah keterampilan dan memperkaya portfolio desainmu 🚀

Terkadang kita bingung bagaimana cara mempresentasikan desain agar lebih dilihat oleh pengguna ataupun target pasar. Oleh karena itu kita membutuhkan mock up dari suatu produk. Mock up sendiri memiliki arti Secara umum bentuk visualisasi yang merepresentasikan desain dari sebuah produk sebelum nantinya direalisasikan. Umumnya, mock up akan digunakan ketika melakukan presentasi ataupun pitching di depan klien. Sederhananya, mock up akan membantu mereka untuk lebih memahami informasi dan juga konsep desain yang akan dibuat. Jika kamu menggunakan Figma, maka plugin ini akan sangat membantu kamu. Mockup Plugin menyediakan gambar-gambar besar yang cocok untuk berbagai jenis media mulai dari web hingga cetak. Baik kamu mencari mock upperangkat, elemen-elemen branding, atau sesuatu yang sedikit lebih unik, koleksi kami siap memenuhi kebutuhanmu. Kamu dapat menggunakan beberapa mock up yang menawarkan variasi bahan dan ukuran, disesuaikan dengan kebutuhan spesifikmu. Cukup pilih perangkat, pilih bingkai, dan desainmu akan muncul di layar. Plugin ini memiliki 3 fungsi utama: Mockup library. Cara paling cepat dan efisien untuk menggunakan mockup dalam proyekmu. Di sini, tersedia kumpulan besar mock up berkualitas tinggi dan paling populer yang siap digunakan untuk memperindah desainmu.Distort (Perspective) transformation. Jika kamu sudah memiliki sebuah mock up, maka dengan menggunakan plugin kami, kamu dapat mengubahnya dan menyisipkan desainmu ke dalam mock up tersebut.AI Surfaces Mockups. memberikan kamu kemampuan untuk memanfaatkan kecerdasan buatan guna mengubah vektor kamuke dalam berbagai jenis permukaan, sesuai dengan kebutuhan proyekmu. Kamu dapat dengan bebas memanfaatkan mockup plugin ini secara gratis untuk mendukung berbagai proyek pribadi maupun komersial yang kamu jalankan. Dengan dukungan dari mockup plugin ini, kamu dapat lebih leluasa mengeksplorasi kreativitasmu tanpa harus khawatir akan biaya tambahan. Cara menggunakan mockup plugin Langkah 1: Cari Mockup Plungin pada resource Cara menggunakan dimulai dengan langkah pertama yaitu mencari Mockup Plugin pada bagian resource. Di sana, kamu dapat dengan mudah menemukan opsi untuk mockup plugin dengan menjelajahi kategori yang tersedia atau menggunakan fitur pencarian untuk menemukannya secara langsung. Setelah menemukan plugin yang diinginkan, langkah selanjutnya adalah memilih opsi "Run Plugin" untuk mengaktifkannya dan memungkinkan kamu untuk memanfaatkan semua fitur yang disediakan. Dengan demikian, langkah pertama ini membantu kamu untuk memulai proses penggunaan mockup plugin dengan cepat dan efisien di Figma. Langkah 2: Cari media mock up yang akan digunakan Pada tahap ini, kamu memiliki kebebasan untuk menentukan jenis media apa yang ingin kamu gunakan untuk menampilkan desain UI/UX kamu. Sebagai contoh, kamu dapat memilih media handphone untuk menampilkan desain UI/UX yang telah kamu buat. Dengan memilih media handphone, kamu dapat menampilkan desain tersebut dalam konteks yang relevan dan memberikan gambaran yang lebih nyata tentang bagaimana desain tersebut akan terlihat di perangkat yang sebenarnya. Langkah 3: siapkan media mock up dan frame seukuran layar handphone Langkah ketiga dalam proses penggunaan mockup plugin adalah menyiapkan media mockup yang telah kamu pilih sebelumnya, serta frame seukuran layar handphone yang sesuai. Dengan menyiapkan frame seukuran layar handphone, kamu akan memiliki tempat yang ideal untuk menampilkan desain UI/UX kamu dengan lebih terperinci. Frame ini akan membantu kamu mengatur desain secara proporsional dan memastikan bahwa tampilan desain kamu akan sesuai dengan ukuran layar handphone yang diinginkan. Langkah 4: Masukan desain pada frame Langkah keempat dalam proses ini adalah memasukkan desain yang telah dipilih ke dalam frame yang sudah kamu persiapkan sebelumnya. Dengan memasukkan desain ke dalam frame, kamu akan memberikan konteks yang lebih nyata tentang bagaimana desain UI/UX kamu akan terlihat ketika diterapkan dalam situasi yang sesungguhnya. Selain itu, langkah ini memungkinkan kamu untuk mengevaluasi desain kamu dengan lebih baik dan memastikan bahwa semua elemen desain terlihat sesuai dengan harapan. Langkah 5: Buka mockup plungin Langkah kelima dalam proses ini adalah membuka mockup plugin setelah kamu menempatkan desain dalam frame.Setelah itu, kamu dapat melanjutkan dengan mengklik kanan pada layar dan mencari opsi untuk plugin di menu yang muncul. Setelah menemukan opsi plugin, lanjutkan dengan mencari mockup plugin yang telah kamu instal sebelumnya. Langkah 6: Plungin kalian akan menampilkan seperti ini Langkah keenam dalam proses ini adalah setelah kamu membuka plugin, maka tampilan modal akan muncul seperti ini. Modal tersebut akan menampilkan berbagai opsi dan fitur yang tersedia dalam plugin mockup. Dari sini, kamu dapat memilih berbagai macam pengaturan, seperti ukuran, orientasi, dan gaya mockup yang ingin kamu terapkan pada desain kamu. Selain itu, modal ini juga mungkin menawarkan opsi untuk menyesuaikan efek, bayangan, dan aspek visual lainnya dari mock up. Langkah 7: Pilih Distort pada menu plugin Langkah ketujuh dalam proses ini adalah memilih opsi "Distort" pada menu plugin. Dengan melakukan langkah ini, kamu akan membuka fitur yang memungkinkan kamu untuk menyesuaikan perspektif dan distorsi pada desain kamu sesuai dengan mockup yang kamu pilih sebelumnya. Opsi "Distort" ini akan memberikan fleksibilitas tambahan dalam menyesuaikan tampilan desain kamu agar sesuai dengan bentuk, sudut pandang, dan dimensi dari mockup yang digunakan. Langkah 8: Pilih vector shape pada mockup Langkah kedelapan dalam proses ini adalah memilih vektor bentuk pada mockup. Beberapa mockup memiliki nama layer yang sudah jelas, dan kalian bisa melihat tulisan 'change this' pada mockup tersebut. Dengan memilih vektor bentuk, kalian akan dapat mengakses elemen-elemen yang mungkin perlu disesuaikan, seperti warna, bentuk, atau ukuran, sesuai dengan desain yang ingin kalian terapkan. Langkah 9: Pilih frame desain Langkah kesembilan dalam proses ini adalah memilih frame desain setelah memilih layar pada mockup. Setelah memilih layar pada mockup, langkah selanjutnya adalah memilih frame yang sudah kamu masukkan desain yang ingin kalian pasang pada mockup tersebut. Dengan memilih frame desain yang tepat, kamu dapat memastikan bahwa desain yang telah kalian buat akan sesuai dengan konteks mockup yang telah dipilih sebelumnya. Langkah 10: Klik apply Langkah kesepuluh dalam proses ini adalah setelah kedua layar tersebut dipilih, maka tampilan pada modal mockup plugin akan berubah sesuai dengan desain yang telah kamu pilih. Langkah terakhir yang dapat kamu lakukan adalah menekan tombol "apply". Dengan menekan "apply", kamu akan memberlakukan perubahan yang telah kamu terapkan pada desain secara langsung ke dalam mockup. Selesai, dan mockup yang telah kamu buat sekarang sudah siap digunakan secara langsung. Dengan proses yang telah dilalui, kamu telah berhasil mengintegrasikan desain kamu ke dalam mockup dengan lancar dan efisien. Mockup Plugin: Membantu dalam proses presentasi Desain 🎨 Dari beragam fitur dan kemampuan dalam menghasilkan mockup yang menarik dan profesional hingga memudahkan dalam menyajikan desain kepada klien atau tim, plugin mockup menjadi alat yang sangat berguna dalam proses presentasi desain. Mau mencoba menggunakan plugin mockup untuk meningkatkan kualitas presentasi desainmu? Yuk, temukan lebih banyak tutorial dan sumber belajar gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design , kamu dapat mengasah keterampilan dan memperkaya portfolio desainmu 🚀

Komponen adalah elemen-elemen yang bisa kamu gunakan lagi dalam desain-desainmu. Komponen membantu kamu menciptakan dan mengelola desain yang konsisten di berbagai proyek. Kamu bisa membuat komponen dari berbagai lapisan atau objek yang udah kamu desain. Ini bisa berbagai macam, seperti tombol, ikon, tata letak, dan lain sebagainya. Ada dua hal yang perlu kamu ketahui tentang sebuah komponen: Sebuah komponen utama mendefinisikan properti dari komponen tersebut.Sebuah instance itu seperti salinan dari komponen yang bisa kamu pake lagi dalam desainmu. Instance ini terhubung ke komponen utama dan nerima pembaruan apa aja yang diaplikasiin ke komponen itu. Kamu bisa bikin komponen buat dipakai dalam satu file. Atau, kamu bisa pake library tim buat berbagi komponen dan gaya di semua file dan proyek. Langkah 1: Pilih item yang ingin dijadikan komponen Perhatikan desainmu dengan saksama, lalu tentukan objek atau kelompok objek yang ingin kamu ubah menjadi komponen. Objek tersebut bisa berupa tombol, ikon, header, atau elemen lain yang ingin kamu gunakan kembali.Gunakan alat pemilih seperti mouse atau trackpad untuk mengklik atau menyoroti item yang ingin kamu jadikan komponen. Pastikan untuk memilih semua bagian dari objek jika objek tersebut terdiri dari beberapa elemen. Langkah 2: Klik kanan dan pilih create component Gunakan mouse atau trackpad untuk mengklik kanan pada objek atau grup objek yang telah kamu pilih. Setelah kamu mengklik kanan pada objek, akan muncul menu konteks. Di dalam menu konteks, cari opsi yang berkaitan dengan pembuatan komponen. Biasanya, opsi ini akan disebut "Create Component" atau "Buat Komponen". Klik pada opsi tersebut. Langkah 3: Component siap untuk digunakan Dengan memanfaatkan komponen, kamu memiliki keunggulan untuk melakukan perubahan pada item secara efisien dengan hanya mengedit main component. Misalnya, ketika kamu membuat perubahan pada main component, seperti mengubah warna, ukuran, atau gaya, perubahan tersebut akan secara otomatis disinkronkan ke semua item yang menggunakan komponen tersebut dalam desainmu. Dengan demikian, penggunaan komponen memungkinkan kamu untuk mengelola konsistensi desain dengan lebih efektif dan menyeluruh dalam proyekmu. Manfaat dari penggunaan komponen: Menghemat waktu pengerjaan dengan menggunakan komponen yang sama juga membantu kamu meningkatkan konsistensi desain dan mempercepat proses pengembangan, karena setiap perubahan yang kamu buat pada komponen akan secara otomatis diterapkan pada semua elemen yang digunakan.Membantu konsistensi elemen desain yang digunakan dari satu halaman ke halaman lain, penggunaan komponen di Figma juga memungkinkan kamu untuk dengan mudah mengelola dan memperbarui elemen-elemen tersebut secara keseluruhan, sehingga memastikan keseragaman dan efisiensi dalam pengembangan antarmuka pengguna.Mudah untuk mengubah dan mengatur komponen memungkinkan kamu untuk dengan cepat menyesuaikan elemen desain sesuai preferensi atau revisi yang mungkin kamu miliki, sehingga memberikan fleksibilitas yang lebih besar dalam proses pengembangan proyek desainmu. Dari tombol yang interaktif hingga ikon yang menarik perhatian, keberagaman dalam komponen desain untuk Figma "menawarkan beragam pilihan" yang sesuai dengan kebutuhan desain dan fungsionalitas proyekmu. Dengan memahami kegunaan dan fleksibilitas masing-masing komponen, pengguna Figma dapat membuat keputusan desain yang terinformasi dalam menentukan tampilan visual proyek mereka. Mau mencoba membuat komponen desain yang lebih kreatif dengan Figma? Tentu bisa! Ayo temukan lebih banyak tutorial dan tips desain gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design, kamu dapat mengasah keterampilan dan memperkaya portofolio desainmu 🚀

Plugin adalah tambahan perangkat lunak yang dapat meningkatkan fungsi atau kemampuan dari perangkat lunak utama. Salah satu plugin yang sangat bermanfaat bagi desainer UI/UX adalah Autoflow. Autoflow membantu desainer dalam menjelaskan alur dari desain mereka agar lebih mudah dipahami. Dengan menggunakan Autoflow, desainer dapat mengurangi kemungkinan kesalahan dalam pengembangan berdasarkan desain yang telah mereka buat. Proses penggunaan Autoflow pada platform Figma cukup sederhana. Setelah menginstal plugin Autoflow, desainer hanya perlu memilih opsi Autoflow dari panel plugin di Figma dan mengikuti petunjuk yang diberikan untuk mengatur alur desain sesuai kebutuhan. Dengan demikian, Autoflow menjadi alat yang sangat berguna bagi desainer UI/UX untuk meningkatkan efisiensi dan akurasi. Langkah 1: Buka resource Langkah pertama yang dapat kamu lakukan adalah mencari panel utama Autoflow dan perhatikan dengan seksama untuk menemukan tombol 'Resources' yang terletak di salah satu sudut panel tersebut. Langkah 2: Cari autoflow pada bagian pluggin Langkah selanjutnya yang perlu kamu lakukan adalah membuka menu Plugins. Setelah itu, telusurilah dengan cermat daftar Plugin yang tersedia hingga kamu menemukan 'Autoflow' di antara opsi-opsi yang ada. Langkah 3: Pilih Run Untuk mengaktifkan Autoflow, langkah selanjutnya yang dapat kamu lakukan adalah memilih opsi 'Run Autoflow' yang terdapat dalam menu plugin perangkat lunak desainmu. Dengan melakukan hal ini, kamu akan siap untuk menggunakan fitur Autoflow yang powerful dan membantu dalam alur kerja desainmu. Langkah 4: Apabila sudah terbuka akan ada tampilan seperti ini Dengan menggunakan pengaturan ini, kamu memiliki kontrol penuh untuk menyesuaikan berbagai aspek desain, mulai dari mengatur garis, menentukan ukuran yang tepat, memilih palet warna yang cocok, hingga menyesuaikan elemen-elemen lainnya sesuai preferensi dan kebutuhan desainmu. Langkah 5: Klik fitur dan halaman Dengan menekan dan menahan tombol Shift pada keyboard komputer kamu saat mengklik fitur atau halaman yang ingin dituju, Autoflow akan segera memberikan respons dengan menampilkan garis panduan yang memudahkan penempatan dan penataan elemen desain. Selain itu, kamu juga memiliki fleksibilitas untuk menambahkan teks secara langsung ke dalam desain tersebut, menyesuaikan dengan kebutuhan dan konsep yang ingin disampaikan. Dari penataan teks yang rapi hingga alur yang terstruktur, Autoflow membantu desainer dalam mengoptimalkan kreativitas mereka dalam setiap tahap proyek desain. Dengan beragam fitur yang disediakan, Autoflow memungkinkan desainer untuk menciptakan alur desain yang mudah dipahami dan diterapkan. Berikut adalah beberapa keunggulan dari fitur Autoflow: Penambahan Teks yang Mudah: Autoflow memudahkan pengguna untuk menambahkan teks ke dalam frame tanpa harus repot mengatur ulang atau memindahkan teks secara manual. Pengguna hanya perlu mengetik teks, dan teks akan mengalir secara otomatis ke dalam frame sesuai dengan batasnya.Fleksibilitas dalam Penyesuaian: Autoflow memungkinkan pengguna untuk dengan cepat menyesuaikan aliran teks dengan mengubah ukuran atau mengedit teks, tanpa harus khawatir tentang penataan ulang teks secara manual.Menghindari Overlapping: Dengan Autoflow, pengguna tidak perlu khawatir tentang overlapping teks atau kekacauan dalam penataan teks. Autoflow akan secara otomatis mengatur aliran teks sehingga tidak ada tumpang tindih antara teks satu dengan yang lain.Peningkatan Efisiensi: Fitur "Mudah mengatur flow" pada Autoflow membantu meningkatkan efisiensi dalam penataan teks, karena pengguna dapat dengan cepat dan mudah mengatur aliran teks tanpa harus repot melakukan penyesuaian manual. Mau mencoba memperkaya desain-desainmu dengan bantuan Autoflow? Kamu bisa segera menggunakannya dalam proyek-proyek desainmu dan melihat bagaimana Autoflow membantu menghadirkan ide-ide kreatifmu menjadi nyata. Jangan ragu untuk eksplorasi dan manfaatkan fitur-fitur Autoflow untuk membawa desainmu ke level berikutnya! Siap untuk mengasah kemampuan desainmu dengan lebih baik? Jangan lewatkan kesempatan untuk bergabung dengan kelas-kelas gratis tentang UI/UXdesign di platform BuildWithAngga! Dapatkan pengetahuan baru, latihan praktis, dan tambahkan kualitas portfolio desainmu dengan mendaftar sekarang! 🚀

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

Dalam dunia UI design, ada teman-teman seru yang bikin desain jadi lebih asyik! Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout, mereka seperti superhero desain UI. Dengan bantuan mereka, desainer seperti kit_a jadi punya senjata rahasia untuk menciptakan tampilan yang keren dan fungsional. Yuk, kita kenalan lebih dekat sama mereka! 😉 Figma Community Figma Community adalah tool terbaik desainer UI. Dengan beragam komponen dan templat gratis, Figma memudahkan kolaborasi tim secara langsung. Keunggulannya juga terletak pada plugin dan penggabungan yang membuat proses desain semakin lancar. Keunggulan Figma Community adalah: Kolaborasi Real-Time: Figma Community memungkinkan kamu untuk bekerja bersama secara langsung, memfasilitasi kolaborasi yang efisien dan tanpa hambatan dalam pengembangan desain.Gratis dan Beragam: Dengan komponen dan templat yang dapat diakses secara gratis, Figma Community menyediakan berbagai resources desain yang beragam, membantu desainer menghemat waktu dan upaya.Plugin dan Integrasi: Figma Community dilengkapi dengan plugin dan penggabungan yang memperkaya pengalaman desain, memudahkan kamu untuk menyesuaikan toool mereka sesuai kebutuhan, meningkatkan produktivitas secara keseluruhan. Open Peeps (Illustrations) Open Peeps merupakan koleksi ilustrasi karakter yang dapat disesuaikan, membantu menciptakan desain UI yang lebih menarik dan bersahabat. Kelebihannya terletak pada kemudahan penggunaan dan fleksibilitas, memungkinkan desainer untuk dengan cepat menyusun visual yang unik. Dengan variasi yang kaya, Open Peeps membantu “menghidupkan” desain tanpa perlu menghabiskan waktu berlebih. Keunggulan Open Peeps sebagai berikut: Karakter Dapat Disesuaikan: Open Peeps menawarkan ilustrasi karakter yang dapat disesuaikan, memungkinkan desainer untuk menciptakan visual yang unik sesuai dengan kebutuhan proyek mereka.Mudah Digunakan: Dengan interface yang sederhana, Open Peeps mudah digunakan bahkan bagi pemula sekalipun, mempercepat proses desain tanpa perlu menghabiskan waktu berlebih.Fleksibilitas Desain: Open Peeps memberikan fleksibilitas tinggi, memungkinkan desainer untuk dengan mudah menggabungkan karakter Open Peeps ke dalam desain mereka, memberikan sentuhan easy to use. Daily UI Daily UI memberikan daily challenge yang mengasah kemampuan desain UI. Dengan fokus pada elemen UI, desainer dapat terus berkembang. Keuntungan utamanya adalah memberikan latihan kreatif harian, memperkaya keterampilan desain secara konsisten. Keunggulan Dailyui adalah seperti: Daily Challenge: Daily UI memberikan tantangan desain harian, membantu desainer mengasah keterampilan mereka dalam merancang elemen UI dengan konsisten.Meningkatkan Kreativitas: Dengan fokus pada elemen UI yang berbeda setiap hari, membantu desainer mengembangkan yang lebih beragam dalam desain mereka.Mengembangkan Keterampilan: Mengikuti tantangan ini secara teratur membantu designer mempercepat developing keterampilan desain UI-mu, membuat mereka lebih siap menghadapi proyek-proyek yang complex. 404 Illustrations 404 Illustrations adalah sumber daya desain yang khusus dirancang untuk mempercantik halaman 404, yang biasanya muncul ketika pengguna mengunjungi halaman yang tidak dapat ditemukan. 404 Illustrations ini menawarkan berbagai ilustrasi yang penuh kreativitas untuk menggantikan pesan kesalahan standar. Ilustrasinya tidak hanya menarik perhatian, tetapi juga memiliki tujuan untuk membuat pengalaman kesalahan menjadi lebih bersahabat dan keren. Keunggulan 404 Illustrations antara lain: Kreatif dan Ramah: 404 Illustrations menawarkan ilustrasi yang kreatif dan ramah untuk error page, menjadikan masa yang seharusnya menjengkel menjadi lebih bersahabat.Jelas dan Menarik: Ilustrasinya tidak hanya menarik perhatian, tetapi juga memberikan pesan yang jelas tentang kesalahan yang terjadi, membantu pengguna memahami situasi dengan mudah.Menghidupkan Error Page: Dengan 404 Illustrations, error page tidak lagi terlihat membosankan. Ilustrasinya memberikan sentuhan visual yang menyenangkan, menciptakan pengalaman yang lebih positif bagi pengguna. Iconscout [Iconscout](https://https://www.figma.com/community/plugin/744098704933821409/iconscout-icons-illustrations-3d-assets-lottie-animations.fun/) adalah sumber ikon yang luas. Dengan beragam ikon dan gaya, Iconscout memenuhi kebutuhan desainer dengan berbagai selera. Integrasi yang mudah membuatnya menjadi tempat yang efisien untuk menemukan ikon-ikon yang sesuai. Keunggulan Iconscout antara lain: Beragam Pilihan: Iconscout menawarkan beragam ikon dengan gaya yang berbeda, memudahkan desainer untuk menemukan ikon yang sesuai dengan tampilan project mereka.Integrasi Mudah: Dengan integrasi yang simpel ke berbagai alat desain, Iconscout memastikan desainer dapat dengan cepat mengakses dan menggunakan ikon-ikon berkualitas tanpa hambatan.Sumber Ikon yang Luas: Iconscout memiliki database ikon yang luas, menjadikannya resources yang mudah untuk memenuhi kebutuhan desainer dengan berbagai selera dan gaya desain. Kesimpulan 💬 Resources Desain Penting: Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout membuktikan diri sebagai tools yang sangat mampu diandalkan bagi UI designer.Beragam dan Gratis: Keunggulan Figma Community dan Iconscout terletak pada kemampuan mereka menyediakan sumber daya yang beragam dan gratis, membantu kamu sebagai designer untuk menghemat waktu dan biaya.Kreativitas Terus Berkembang: Dailyui memberikan tantangan harian/daily challenge, memacu desainer untuk terus berkembang dan meningkatkan keterampilan desain UI-mu.Mengatasi Kesalahan dengan Kreativitas: 404 Illustrations tidak hanya mempercantik error page, tetapi juga membuat experience error menjadi lebih bersahabat dengan ilustrasi yang eye-catching.Efisiensi dan Fleksibilitas: Iconscout terkenal dengan menyediakan ikon-ikon beragam dan mudah diakses, memastikan designer dapat bekerja dengan efisien tanpa mengorbankan fleksibilitas. Dalam dunia UI design, memiliki akses sumber daya yang tepat sangatlah penting. Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout membuktikan diri sebagai “senjata” tak tergantikan bagi UI designer. Dengan beragamnya resources dan daily challenge dari Daily UI, desainer dapat terus mengasah kreativitas mereka. 404 Illustrations memberikan kesan ramah pada error, sedangkan Iconscout dengan koleksi ikonnya yang beragam memudahkan desainer dalam mencari yang sesuai. Semuanya ini membuktikan bahwa kualitas desain dapat ditingkatkan dengan memanfaatkan berbagai resources yang ada.

Dalam dunia digital design, Figma telah menjadi “pegangan” setia bagi para designer yang sangat membutuhkam inovasi baru. Dengan interface yang bersahabat dan kemampuan kolaboratif, Figma bukan hanya tools desain biasa/semata, tetapi juga pilihan yang tepat bagi pengguna Windows untuk memulai kreativitas mereka. Artikel ini akan mengarahkan kamu melalui langkah-langkah men-download dan meng-install Figma di Windows, mempersiapkan kamu untuk explore dunia desain tanpa batas yang ditawarkan oleh platform ini. Berikut keunggulan menggunakan Figma: Real-time Collaborations: Figma memberikan kemampuan berkolaborasi secara real-time, antar anggota tim untuk bekerja bersama pada project desain untuk menghemat waktu dan lokasi. Hal ini mampu mengoptimalkan produktivitas dan memastikan kerjaan menjadi jauh lebih secara efisien.Prototyping yang Interaktif: Dengan Figma, designer dapat menciptakan prototype interaktif dengan mudah. Ini memungkinkan mereka untuk menguji design mereka sebelum diimplementasi.Component Library: Figma memiliki konsep component library yang dapat digunakan kembali. Designer dapat membuat, menyimpan, dan menggunakan komponen desain secara konsisten di seluruh project. Hal ini tidak hanya memastikan konsistensi visual, tetapi juga mempercepat proses desain dengan meminimalkan pengulangan membuat komponen.Memperpadukan Desain yang Mudah: Figma mendukung perpaduan yang mudah dengan berbagai tool desain dan prototyping lainnya. Dengan kemampuan untuk mengimpor dan mengekspor berbagai format file, Figma memudahkan desainer untuk berkolaborasi dengan tim yang mungkin menggunakan tool desain berbeda. Yuk simak cara meng-install Figma untuk Windows! Kunjungi Situs Resmi Figma Buka browser kamu lalu kunjungi situs resmi Figma. Daftar atau Masuk Akun Buatlah akun Figma untuk mulai mendesain atau jika kamu sudah memiliki akun, pilih opsi Log In. Get the Desktop App Pada pojok kiri atas, ada Menu akun. Klik tanda panah yang ke arah bawah dan pilih Get Desktop App. Ikuti langkah selanjutnya yang diarahkan. Open Figma Terakhir, kamu tinggal buka aplikasi Figma yang ada di laptop/komputermu. Kamu tidak perlu lagi membuka Figma lewat browser yaa Lalu klik opsi + Design File untuk mulai membuat design! Last but Not Least, Explore Your Design Style Now! Dengan mengikuti langkah-langkah ini, kamu dapat dengan mudah menginstal Figma di Windows dan mulai explore potensi kreativitasmu. Kalau kamu ingin memulai perjalanan menjadi seorang UI/UX designer, kami menyarankan kamu untuk mengikuti alur pembelajaran UI/UX gratis yang kami sediakan seperti: UI Design : Grid System dengan Figma Di sini kamu akan mulai mempelajari: Tools Dasar FigmaMemahami fungsi Grid dalam projectMembuat Grid pada FigmaMengimplementasikan Grid ke UI Design Pada kelas Grid System ini, kamu akan belajar bagaimana Grid System membantu kita untuk menentukan letak elemen desain yang konsisten. Tanpa menggunakan Grid, kemungkinan besar letak elemen tidak konsisten dan hasilnya jadi tidak responsive. Dengan grid, kamu dapat dengan cepat menempatkan elemen-elemen desain tanpa harus terus-menerus mengukur dan menyesuaikan letaknya. Dengan mengatur grid yang responsif, kamu dapat dengan mudah mengatur layout untuk berbagai ukuran layar atau perangkat, memastikan experience pengguna yang konsisten di seluruh platform. Kelas ini cocok untuk kamu yang ingin mempelajari Micointeracion, untuk kamu yang ingin mempelajari cara membuat prototype dan mendalami pengetahuan UI/UX! UI Design : Wireframe to Visual Design Di kelas ini kamu akan belajar tentang: Pembuatan Moodboard untuk referensi desainImpor gambar dan icon untuk tampilan UIMenentukam hirarki teksMengubah tampilan Wireframe menjadi Visual Design Wireframe dan Visual Design adalah dua aspek kunci dalam proses UI design Figma, dan keduanya memainkan peran yang sangat penting dalam pembuatan UX yang efektif dan menarik. **** Visual design memiliki peran yang sangat penting dalam UI design di Figma maupun dalam platform desain lainnya. Visual Design sangat penting untuk memberikan first impression yang baik. Design yang menarik dan profesional dapat memberi kesan positif dalam desainmu.Wireframe mampu memberikan gambaran kasar akan letak elemen-elemen penting, seperti posisi tombol, teks, dan gambar juga memberikan “kerangka desain” untuk didiskusikan dan mereview fitur dan fungsi utama desain. Di kelas ini kamu akan mempelajari cara membuat sebuah tampilan mulai dari proses pembuatan moodboard menggunakan InvisionApp yang terdiri dari tipografi, warna dan juga referensi design. Kelas ini cocok untuk pemula UI/UX agar mengerti bahwa Visual Desain tidak hanya tentang “estetika” tapi juga menciptakan pengalaman user yang optimal. UI Style Guide Lalu kamu akan diarahkan untuk belajar dan memahami tentang: Style Guide dan Design LibraryPerbedaan Frame dan GroupPembuatan Component Responsive dengan Auto LayoutPembuatan Varian Component Style guide memiliki peran yang sangat penting dalam pembuatan UI design di Figma, maupun tools desain lainnya. UI/UX designer harus membuat design yang konsisten baik dalam pemilihan warna, teks, ukuran elemen/komponen dan mampu mempermudah pembuatan UI design karena waktu yang jadi lebih hemat. Kita akan belajar cara mendesain dengan cepat dan terstrukur dengan memanfaatkan Auto Layout, Design Tokens dan penggunaan rekomendasi plugins yang sangat efisien. Dengan memahami dan menerapkan Style Guide yang konsisten, tim desain dapat memiliki hasil yang lebih baik dan efisien dalam pembuatan UI design yang berkualitas. Kelas ini cocok untuk kamu yang ingin mendalami pengetahuan akan Design Library juga lho! Menarik kan? Yuk segera manfaatkan dan bergabung bersama students lainnya untuk gaining new skills as a ui ux designer😉

Isometric Design memberikan dimensi yang menarik dan menambahkan nilai visual pada project desain. Dalam artikel ini, kita akan membahas cara membuat isometric design menggunakan plugin SkewDat di Figma. Dengan memahami dasar-dasar plugin ini, kamu dapat meningkatkan desain isometric-mu dengan cepat dan efisien. SkewDat adalah plugin Figma khusus untuk memberikan kemampuan skewing atau memiringkan objek dalam desain. Plugin ini mampu memberikan kita cara yang intuitif dan fleksibel untuk mengubah sudut dan bentuk elemen desain dengan “pas”. Dengan SkewDat, kamu dapat dengan mudah menciptakan efek visual isometrik yang sulit didapat dengan cara manual. Plugin ini dapat diakses melalui Figma Community atau langsung dari Interface Figma, memudahkan desainer/pengguna untuk menerapkannya ke dalam alur kerja design mereka. Adapun keunggulan SkewDat antara lain: Mudah digunakan Salah satu keunggulan utama SkewDat adalah kemudahan penggunaannya. Plugin ini dirancang dengan interface yang intuitif/resposif, membuatnya mudah digunakan oleh designer pemula sekalipun. Cara mengaplikasikannya yang sederhana memungkinkan pengguna untuk dengan cepat dan efisien membuat efek skewing pada elemen desain mereka tanpa perlu menguasai keterampilan desain yang rumit.Ketepatan yang Tinggi SkewDat memberikan tingkat presisi/ketepatan yang tinggi dalam mengatur skewing objek. Designer dapat dengan akurat mengatur sudut dan bentuk elemen desain, memastikan bahwa hasilnya tampak profesional dan sesuai dengan ekspektasi kreatif mereka. Presisi ini menjadi kunci untuk menciptakan isometric design yang rapi dan aesthetic.Flexiblity Keunggulan lain dari SkewDat adalah fleksibilitas dalam desain. Plugin ini memberikan pengguna kebebasan untuk menyesuaikan elemen desain dengan cara yang sulit dicapai secara manual. Dengan SkewDat, pengguna dapat bereksperimen dengan berbagai sudut skewing, menciptakan tampilan isometrik yang unik dan menyesuaikan desain sesuai kebutuhan kreatif. Fleksibilitas ini memberikan ruang bagi eksplorasi dalam proses desain. Sekarang mari kita buat Isometric Page menggunakan SkewDat! Install Plugin Buka Figma dan masuk ke Explore Community di Menu sidebar. Search SkewDat Plugin dan jika sudah ketemu, select “Try it Out” atau pilih opsi Save. Siapkan Page atau Artboard Pilih Page atau Artboard yang ingin kamu skew. Lalu klik kanan untuk mengaktifkan plugin SkewDat. Atur Tingkat Kemiringan Design Di sini, saya mengatur tingkat skew menjadi 36° dan juga mengubah Rotation menjadi 22°. Drop Shadow Kamu bisa menambahkan shadow untuk membuatnya menjadi lebih aesthetic. Di sini, saya mengubah X= -20, Y= 60, Blur= 40, dan opacity warna #343B46 menjadi 10%. Finishing Nah congrats! 🎉 Sekarang kamu sudah mengerti ‘kan cara skew design/object dengan SkewDat? Gunakan plugin SkewDat untuk bereksperimen dengan berbagai elemen desain lainnya. Biasanya, designer menggunakan plugin SkewDat untuk membuat Design Presentation, selain menampilikan hasil Mockup Design dan Typeface. Atau biasa juga untuk membuat sebuah Cover pada file design mereka. Kalau kamu ingin meng-explore lebih luas lagi tips&trick pembuatan UI/UX yang menarik, kamu bisa memulainya dengan mengikuti kelas-kelas gratis UI/UX di BuildWithAngga lho! Jadi, tunggu apa lagi? Sampai jumpa di kelas 😉

Dalam dunia desain, Figma telah menjadi “alat” yang sangat penting bagi para desainer untuk bekerja-sama dan menciptakan prototype yang efektif. Salah satu fitur unggulan desainer di Figma adalah plugin "Mockup". Plugin ini tidak hanya menghadirkan kenyamanan dalam pembuatan mockup, tetapi juga membeikan kualitas prototipe desain secara keseluruhan. Plugin Mockup di Figma dirancang untuk mempermudah proses pembuatan mockup, yang merupakan representasi visual dari desain produk atau proyek. Dengan menggunakan plugin ini, kamu dapat dengan mudah menambahkan tampilan desainmu ke dalam bingkai atau perangkat tertentu, memberikan gambaran yang lebih nyata tentang bagaimana desain tersebut akan terlihat dalam konteks yang diinginkan. ini sangat membantu dalam mengomunikasikan ide kepada klien atau anggota tim dengan lebih jelas dan efektif. Keunggulan Plugin Mockup: Presentasi yang Lebih Menarik: Dengan menggunakan plugin Mockup, designer dapat memberikan presentasi yang lebih menarik dan nyata, menunjukkan desain dalam situasi yang mirip dengan penggunaan sehari-hari.Beragam Pilihan Mockup: Plugin ini menyediakan berbagai opsi mockup, mulai dari perangkat seperti smartphone dan tablet hingga bingkai cetak dan presentasi, memberikan fleksibilitas dalam memilih konteks yang diinginkan.Tingkat Customization yang Tinggi: Designer dapat customize mockup sesuai dengan preferensi mereka. 1. Install Plugin Mulailah dengan meng-install plugin Mockup dari Figma Community. Cari plugin ini dan pilih "Try it out" atau pilih opsi “Save” untuk mengaktifkannya. 2. Siapkan Artboard Siapkan Artboard mana saja yang ingin kamu masukan ke dalam Mockup. 3. Aktifkan dan Buka Plugin Mockup Klik kanan dan pilih Plugins lalu pilih plugin Mockup maka plugin akan otomatis aktif. Jika sudah, pilih jenis/style mockup apa yang kamu mau dan butuhkan. 4. Seleksi dan Masukan Artboard Pilih tanda “+” pada plugin lalu select artboard yang kamu inginkan untuk dijadikan mockup. 5. Finishing Setelah itu, isi semua mockup untuk ditambahkan ke dalam canvas, select Paste in Canvas. Jika sudah, masukan mockup UI design-mu ke dalam Frame. Done! 🎉 Ta da! Sekarang kamu sudah mengerti cara menggunakan plugin Mockup dan sebeapa pentingnya Mockup dalam mendesain 🎉 Kesimpulan Nah, sekarang dapat kita simpulkan bahwa keberadaan Mockup Plugin dalam Figma membawa dampak positif dalam mengoptimalkan proses desain dan prototyping. Dengan plugin ini, desainer tidak hanya dapat menghemat waktu, tetapi juga meningkatkan kualitas presentasi dan komunikasi ide desain. Kelebihan pemaikaian yang mudah, beragam pilihan mockup, dan tingkat custom yang bervariasi menjadikan plugin ini sebagai elemen penting dalam toolkit desain di Figma. Sehingga, Mockup Plugin merupakan “solusi” yang memungkinkan designer untuk mendapatkan potensi penuh dari setiap design yang mereka ciptakan, menampilkannya dalam konteks yang lebih nyata dan relevan. Tertarik belajar lebih jauh tentang dunia UI/UX? Yuk mulai dengan kelas UI/UX gratis di BuildWithAngga untuk memperdalam skill mendesainmu 😊