Search
Klik Untuk Belajar Gratis
Belajar Gratis

UI/UX Design

UI/UX Design

6 Shortcuts Figma yang Wajib Dikuasai, Salah Satunya Adalah Ini

/

Kalau kamu yang suka  ngulik desain pakai Figma, ada beberapa shortcut penting yang bisa bikin workflow kamu makin ngebut. Karena percaya atau enggak, kadang skill desain nggak cuma soal estetika aja. Tapi tentang gimana kamu  kerja lebih efisien. Yuk, kenalan sama 6 shortcuts Figma yang wajib dikuasai. Shortcuts ini nggak cuma bantu kamu desain lebih cepat, tapi bisa bikin kamu kelihatan pro pas ngulik layout. 6 Shortcuts Figma yang Wajib Dikuasai 1. Remove Fill Remove Fill tuh shortcut yang sering banget kepake kalau kamu lagi ngulik shape dan mau langsung ngehapus warna isinya tanpa drama buka panel kanan. Bisa kepakai pas kamu cuma butuh outline atau mau bikin shape yang kelihatan lebih clean dan aesthetic. Menariknya kamu  tinggal pencet Alt+/ nggak pake ribet kan? 2. Remove Stroke Remove Stroke bikin kamu bisa ngilangin garis luar shape dalam hitungan detik tanpa harus nyari panel kanan yang ribet. Fitur ini kepake banget kalau kamu lagi pengen bikin desain yang clean, flat, dan nggak mau ada garis yang ngerusak vibes. Kalau kamu lagi lupa shortcut-nya, tinggal pencet Shift+/ terus fiturnya langsung bisa dipakai deh. Intinya, shortcut ini bisa bikin desain lebih rapi, lebih aesthetic, dan proses editnya ringan tanpa drama. 3. Fill and Stroke Shortcut ini ibarat kombo sakti buat ngatur fill dan stroke sekaligus. Jadi kamu nggak perlu klik satu-satu di panel, cukup pake shortcut ini dan bentuk langsung punya isi dan garis dengan cepat. Kamu juga bisa langsung pencet Shift + X buat tukar posisi fill dan stroke biar makin cepat. Fill and stroke pastinya jadi bagian dari shortcut Figma yang wajib dikuasai. Hasilnya ya biar alur kerja kamu makin cepat dan nggak banyak buang waktu. 4. Outline Stroke Outline Stroke bantu kamu ngubah stroke jadi bentuk solid yang bisa diedit bebas. Fitur ini kepake banget pas kamu bikin ikon atau ilustrasi yang butuh detail presisi. Pas kamu pake, garis luar yang tadinya cuma outline langsung berubah jadi objek vector. Udah gitu vectornya bisa kamu edit sesuka hati. Kamu juga bisa pakai Shift + Ctrl + O biar lebih cepat. Shortcut ini bikin hasil desain kamu kelihatan jauh lebih rapi dan profesional. 5. Flatten Selection Flatten Selection ibarat penyelamat kalau file kamu udah kebanyakan grup atau layer yang numpuk. Shortcut ini bisa kamu pakai buat ngerapihin semua elemen jadi satu kesatuan. Outputnya jadi lebih simple dan gampang di-manage. Kamu juga bisa pakai Ctrl + E biar prosesnya makin cepat. 6. Join Selection Join Selection itu salah satu shortcuts Figma yang wajib dikuasai. Apalagi kalau kamu sering ngedit bentuk dengan banyak anchor point. Fitur ini ngebantu kamu nyambungin titik-titik biar shape lebih rapi dan mulus. Biasa banget kamu pakai buat bikin logo, bentuk custom, atau ilustrasi. Simpel tapi impactful,  dan kamu bisa langsung manggil fitur ini pakai CTRL + J. Akhirnya pembahasan kita kelar juga, dan sekarang kamu udah siap ngegas di Figma dengan workflow yang lebih cepat, rapi, dan kece. Shortcut-shortcut ini bakal jadi senjata andalan kamu buat ngedesain tanpa ribet lagi deh. 

UI/UX Design

4 Roadmap Belajar UI/UX Desain

/

Roadmap belajar UI/UX desain jadi panduan penting buat kamu yang baru mau mulai terjun ke dunia desain digital. Dengan rute belajar yang jelas, kamu bisa berkembang lebih tanpa takut kesasar. Roadmap ini bakal bantu kamu memahami langkah awal, tools penting, dasar-dasar UI, sampai gimana kamu bisa konsisten latihan biar skill makin naik level. 4 Roadmap Belajar UI/UX Desain 1. Kuasai Satu Software Desain Dulu Roadmap belajar UI/UX desain selalu dimulai dari memilih dan menguasai satu software desain. Kamu bisa pilih Figma, Sketch, atau Adobe XD, nggak harus menguasai semua sekaligus. Figma biasanya jadi favorit pemula karena gratis dan gampang diakses. Kalau kamu pengguna Mac yang suka tampilan simpel, Sketch bisa jadi pilihan nyaman. Nah, kalau Adobe XD cocok buat yang udah familiar sama produk-produk Adobe. Fokus aja bikn frame, layout, sampai prototyping sederhana. Kalau kamu udah ngerti satu software sampai lancar, kamu punya pondasi kokoh sebelum belajar hal-hal yang lebih kompleks. 2. Pelajari Tools-Tools Penting di Dalamnya Setelah nyaman sama softwarenya, roadmap belajar UI/UX desain lanjut ke tahap eksplor tools-tools inti yang bakal kamu pakai setiap hari. Misalnya di Figma, kamu perlu ngerti Auto Layout, Components, Styles, sampai fitur Prototyping. Tools-tools ini yang bikin workflow kamu makin cepet dan desain kamu makin konsisten. Nggak ada cara cepet selain latihan: klik, drag, ubah properti dan eksperimen sana-sini. Dunia UI/UX itu emang arena trial-and-error, dan dari eksplor kecil-kecilan gitu,  kamu bakal paham cara bikin layout yang rapi dan profesional. 3. Kuasai Basic UI Design Roadmap belajar UI/UX desain bakal naik level banget ketika kamu mulai mendalami basic UI design. Di sini kamu belajar soal warna, tipografi, spacing, grid system, hierarchy, sampai desain sistem. Ini ilmu yang ngebentuk “sense of design” kamu. Kamu bakal tahu kenapa tombol harus kontras, kenapa teks nggak boleh terlalu kecil, dan kenapa layout yang rapi bikin user betah. Cara belajar tergampang? Lihat aplikasi top kayak: Spotify, Tokopedia, Gojek, atau Instagram terus analisis tampilannya. Dari situ kamu bakal ngerti standar industri dan dapet insight buat style desain kamu sendiri. 4. Konsisten Latihan dan Bangun Jam Terbang Tahap terakhir di roadmap belajar UI/UX desain ini sebenarnya yang paling krusial: konsisten latihan. Skill desain nggak tumbuh dari teori doang, tapi dari seberapa sering kamu praktek. Mulai aja dari mini project kecil, redesign aplikasi populer sampai bikin landing page. Semakin sering latihan, semakin tajam insting desain kamu. Upload hasil karya ke Instagram, Dribbble, sampai Behance juga bisa bantu kamu dapet feedback yang bermanfaat. Nggak perlu insecure kalau hasil awalnya belum perfect, karena semua desainer pernah mulai dari nol. Akhirnya, perjalanan belajar UI/UX itu bukan sprint, tapi lebih kayak marathon yang seru. Selama kamu terus maju, belajar hal baru, dan berani eksplor, skill kamu bakal berkembang jauh lebih cepat dari yang kamu kira. Nikmati prosesnya, jangan terlalu keras sama diri sendiri, dan terus buka ruang buat belajar.

UI/UX Design

4 Panduan Membuat Portofolio UI/UX Pemula

/

Buat kamu yang baru masuk ke dunia desain digital, punya portofolio UI/UX tuh persoalan yang penting banget. Portofolio tuh bukan sekedar tempat buat naruh hasil desain, tapi juga nunjukin cara kamu mikir, nyelesain masalah sampai nyiptain solusi desain yang user-friendly.  Tapi tenang, kamu nggak harus langsung pro buat bisa mulai. Fokus utamanya bukan perfect, tapi progress. Nah, di artikel ini, kita bahas bareng yuk 4 panduan membuat portofolio UI/UX pemula yang gampang diterapin. Cocok banget buat kamu yang masih pemula tapi tetep pengen kelihatan elegan. Panduan Membuat Portofolio UI/UX Pemula 1. Figma: Rumah Utama Buat Semua Desainmu Figma tuh ibarat rumah buat desainer UI/UX. Segala proses desain biasanya dilakukan pakai platform ini, muladi rari bikin user flow sampai prototyping interaktif. Nah, buat pemula platform satu ini tuh cukup ramah, karena punya tampilan yang simple tapi gampang dipahami.  Kamu bisa tuh eksplorasi pakai Figma misal bikin wireframe polos biar nggak overwhelmed sama warna halaman atau visual. Selain itu, kamu juga bisa manfaatin fitur auto layout biar desain rapi tanpa ribet. Kalau pingin lebih cepat lagi, kamu bisa  pakai Plugin AI Figma yang bisa bantu cepetin workflow. Intinya buat punya portofolio kamu jangan takut nyoba, jangan kebanyakan overthinking kalau desain masih kelihatan jelek di awal-awal. Karena semua desainer professional  pernah ngalamin fase pemula, tapi mereka nggak berhenti coba. Ikuti aja prosesnya, dan jangan ragu nunjukin progres kamu di portofolio.  2. Unblast: Sumber Mockup Gratis Biar Portofolio Mu Makin Estetik Desain UI tanpa mockup itu ibarat mie instan tanpa telur, masih enak, tapi kurang wow. Makanya mockup penting banget buat bikin portofolio kamu keliatan lebih hidup dan profesional. Unblast jadi salah satu tempat terbaik buat kamu nyari mockup gratis dan berkualitas. Di situ kamu bisa nemu mockup smartphone, laptop, packaging,  browser frame, dan segala jenis elemen visual yang bikin hasil desain kamu tampil lebih estetik.  Pilih mockup yang clean dan minimalis biar desainmu tetap jadi fokus utama. Usahain juga tone-nya selaras sama style desainmu, kayak warna, vibe, dan nuansa visual. Dengan mockup yang tepat, portofolio kamu bakal keliatan jauh lebih elegan meski kamu masih pemula. 3. Google AI Studio: Bantuin Riset Kilat Tanpa Bikin Overthinking UI/UX nggak cuma soal warna yang aesthetic, tapi juga soal riset. Dan kadang riset bisa super melelahkan kalau kamu masih pemula. Nah, Google AI Studio ada sebagai penyelamat buat kamu yang butuh insight cepat tapi nggak muter-muter. Kamu pakai aja Google AI Studio buat nemuin user persona, ngulik masalah user, sampai rapihin data riset biar gampang dipahami. Kamu tinggal masukin prompt sesuai kebutuhan,  dan jadi deh.  Ini bakal bantu kamu banget waktu bikin case study di portofolio, karena recruiter biasanya lebih tertarik sama cara kamu ngambil keputusan dan mikir sebagai desainer. Bukan cuma tampilan akhirnya aja. Kamu jadi bisa bikin riset yang rapi, masuk akal, tapi tetap mudah dipahami dengan Google AI Studio. 4. ChatGPT: Bestie Buat Nulis Case Study yang Mengalir dan Nggak Kaku Desain yang bagus itu penting, tapi storytelling dalam case study juga punya peran krusial. Sayangnya, nggak semua orang suka nulis. Makanya ChatGPT bisa jadi sahabat terbaik kamu buat nyusun portofolio UI/UX yang lebih profesional.  Kamu bisa minta ChatGPT buat merapikan bahasa case study, bikin alurnya lebih manusiawi, atau ngejelasin proses desainmu biar lebih jelas dan masuk akal. Misalnya kalau kamu bingung harus mulai dari mana, kamu tinggal paste tulisan mentahmu dan minta ChatGPT memperhalusnya. Kalau kehabisan ide, ChatGPT Juga bisa bantu brainstorming loh. Intinya portofolio UI/UX pemula itu nggak serumit yang dibayangin. Kamu nggak perlu langsung menjadi profesional di awal. Mulai aja dulu dengan tools dan platform yang paling mudah dipakai. Berprogress, latihan maka kamu selangkah lebih maju di dunia desain setiap harinya.

UI/UX Design

6 Rekomendasi Plugin AI Figma yang Wajib Kamu Coba

/

Plugin AI Figma itu udah kayak lifesaver buat para desainer yang tiap hari ngulik Figma. Kamu pasti tau rasanya: ngatur layout yang rempong, bikin komponen satu-satu, ngerjain wireframe sampai mata merah, sampai revisi berkali-kali.   Capek, kan? Nah, udah bukan zamannya ngedesain serba manual, karena udah ada AI yang bisa ngebut banget bantuin workflow kamu jadi lebih cepat, rapi, dan estetik parah. Plus, cara pakenya super gampang, cocok buat kamu yang pengen hasil kece tanpa ribet. So, here you go,  ada 6 rekomendasi Plugin AI Figma yang  literally wajib kamu coba. Rekomendasi Plugin AI Figma yang Wajib Kamu Coba 1. Clueify Clueify tuh kayak asisten pribadi yang selalu ngerti kamu. Plugin satu ini bisa ngebantu kamu nyari referensi visual, style, sampai elemen desain yang relevan cuma pakai satu kata kunci. Jadi kalau kamu lagi stuck atau kehabisan inspirasi, tinggal masukin keyword dan Clueify bakal nyediain rekomendasi desain yang super relevan.  2. Flowkit Flowkit itu ibarat shortcut suci buat kamu yang sering ngegarap user flow, wireframe, atau prototype. Plugin ini ngebantu kamu bikin diagram, arrow, sampai komponen navigasi super cepat. Walaupun Flowkit bukan murni AI dari awal, update barunya udah makin smart karena AI-nya bisa bantu nyesuaiin struktur flow sesuai pola desain yang kamu bikin.  3. Automator Kalau kamu pernah capek karena harus ngulang-ngulang tugas kecil kayak rename layer, duplikat komponen, sampai generate state maka Plugin ini sangat bisa bantu kamu. Automator tuh kayak cheat-code buat ngejalanin banyak tugas otomatis cuma dengan satu klik atau satu perintah. Bahkan kamu bisa bikin resep sendiri buat action tertentu, biar kerjaan repetitif langsung kelar tanpa drama. Cocok banget buat kamu yang punya project gede dengan banyak layer atau file yang berantakan. Hasil akhirnya? Workflow lebih clean, cepat, dan zero keribetan. 4. Relume Relume tuh jagonya bikin desain website super cepat tapi tetep high-quality. Plugin AI Figma ini punya ratusan komponen dan blok desain yang siap di-generate otomatis sesuai kebutuhan. Kamu tinggal masukin prompt singkat, terus Relume bakal nyediain layout full yang udah estetik dan well-structured. Cocok banget buat desainer Webflow atau UI designer yang dikejar deadline tapi pengen hasil tetap rapi dan modern. 5. Pixlore Kalau kamu main di area visual, branding, atau ilustrasi, Pixlore bakal jadi plugin favorit baru kamu. Plugin AI Figma ini bisa  nge-generate icon, ilustrasi, dan elemen dekoratif langsung dari prompt. Menariknyawebsite apa pun bisa langsung di generate ke file Figma yang bisa kamu edit. Kamu tinggal paste link website terkait, langsung deh bisa di-custom. 6. Magnestics Magnestics adalah Plugin AI Figma buat kamu yang obsess sama layout rapi dan alignment yang satisfyingly clean. Plugin satu ini juga nyediain koleksi icon yang dibikin sama AI. Kamu tinggal pilih aja sesuai selera dan langsung tempel. Jadi nggak perlu lagi ribet nyari icon satu per satu lagi. Nah, habis kenal sama 6 Plugin AI Figma ini, kamu bisa kerja lebih cepat, lebih rapi, dan pastinya lebih kreatif. Tinggal pilih yang paling cocok sama workflow kamu, dan habis itu itu desain kamu bakal naik level tanpa effort berlebihan.

UI/UX Design

Ini Dia 4 Teori Warna UI/UX yang Bikin Desainmu Naik Level

/

Kalau kamu baru masuk dunia desain digital, pasti sadar satu hal: warna itu bukan cuma elemen pemanis. Dalam teori warna UI/UX, warna punya peran besar buat naikin mood, memperjelas navigasi, sampai mengarahkan user biar nggak nyasar. Desainer yang jago warna biasanya juga jago bikin user betah. Nah, biar desainmu makin kece dan keliatan pro, ini dia 4 teori warna yang wajib kamu kuasai. Santai aja, penjelasannya  nggak ribet kok,  cocok banget buat kamu yang masih baru di UI/UX. 4 Teori Warna UI/UX yang Bikin Desainmu Naik Level 1. Trik 60–30–10: Formula Simpel yang Bikin UI Auto Aesthetic Kalau UI kamu sering terasa “ramai”, “berisik”, atau “nggak balance”, kemungkinan komposisi warnanya belum pas. Dalam teori warna UI/UX, salah satu rumus paling populer buat atur komposisi adalah 60–30–10 rule. Ada 3 hal yang perlu kamu perhatiin: Contohnya, kamu pakai warna abu muda sebagai 60%, biru sebagai 30%, dan kuning sebagai aksen 10%. Dampaknya? UI kelihatan lebih  rapi, modern, dan nyaman dilihat. Rumus ini ngebantu kamu supaya warna nggak “berantem” satu sama lain. Ini basic banget tapi powerful. 2. Warna Khusus untuk User Feedback: Biar User Nggak Bingung Harus Ngapain Nah, ini penting banget! Kalau ngomongin teori warna UI/UX, warna bukan cuma buat cantik, tapi buat komunikasi. Jadi user perlu tahu kapan mereka berhasil, salah, atau sedang diproses. Di sinilah warna feedback punya peran penting. Biar ada gambaran kamu bisa simak 4 contoh warna yang sering banget dipakai: Contoh penerapan: tombol submit berubah hijau setelah berhasil, atau form yang kosong dikasih border merah. Ini bikin user lebih ngerti apa yang terjadi tanpa perlu baca teks panjang. Selain itu, jangan lupa pakai warna feedback secara konsisten. Jangan hari ini error warna merah, besok ganti ungu. User bisa bingung dan itu ngurangin trust. Ketelitian kecil kayak gini bikin desain kamu kelihatan professional lho! 3. Color Hierarchy: Biar User Fokus ke Hal yang Seharusnya Color hierarchy tuh cara ngatur warna biar kegunaan tiap visualnya jelas: mana yang penting, mana yang pendukung, mana yang cuma pelengkap tampilan. Kamu bisa lihat 2 permisalan berikut: Prinsipnya:  warna yang lebih kuat itu punya prioritas lebih tinggi. Kalau sampai user bingung mau klik mana dulu, berarti hierarki warna desainmu masih kurang. Misalnya: semua tombol warnanya sama, atau heading dan body text warnanya mirip. Jangan kaya gitu ya, harus ada hierarki. 4. Dark Mode: Tren UI Kekinian yang Nggak Sekadar Estetik Siapa yang nggak suka dark mode? Selain terlihat futuristik, dark mode juga bikin mata user lebih nyaman. Di dark mode, kamu nggak bisa cuma membalik warna jadi gelap aja. Ada beberapa prinsip yang perlu kamu perhatikan: Intinya dark mode bukan sekedar aesthetic choice, tapi juga seni ningkatin pengalaman pengguna biar lebih baik. Karena itu, warna emang punya kekuatan besar dalam dunia desain. Nah, dengan memahami teori warna UI/UX seperti 60–30–10, warna feedback, color hierarchy, dan dark mode, kamu udah selangkah lebih dekat menuju desain yang profesional, clean, dan nyaman dipakai user. Bahkan kalau kamu masih pemula, menguasai empat teori ini aja udah bisa bikin desainmu naik level dan terlihat jauh lebih matang. Selamat bereksperimen!

UI/UX Design

Mengenal Apa Itu UI/UX Design yang Bisa Bikin Produk Digital Jadi Keren

/

Pernah dengar istilah UI/UX Design? Dua hal ini penting banget dalam dunia digital, apalagi kalau kamu mau bikin aplikasi atau website sendiri. Tapi, banyak orang yang masih bingung apa sih bedanya UI dan UX, mana yang lebih penting, atau apakah cukup fokus ke salah satunya saja. Nah, supaya kamu nggak bingung, yuk ikutin pembahasan aku seputar topik ini. Apa Itu UI Design? UI atau User Interface adalah bagian dari sebuah produk digital yang bisa kamu lihat dan klik secara langsung. Semua hal seperti tombol, warna, ikon, tulisan, gambar, animasi, dan tata letak yang muncul di layar, itu semua hasil dari UI/UX Design. Peran UI Buat Bikin Produk Digital Tugas UI bukan cuma bikin tampilan jadi cantik dan menarik mata, tapi juga memastikan pengguna bisa memakainya dengan mudah tanpa bingung. Kalau UI-nya bagus, orang yang memakai aplikasi atau website kamu akan merasa nyaman dan betah berlama-lama. UI berperan sebagai jembatan antara pengguna dan produk, sehingga interaksi bisa terjadi dengan cara yang sederhana dan menyenangkan. Ini adalah langkah awal penting dalam menciptakan UI/UX Design yang sukses. Apa Itu UX Design? Sementara itu, UX atau User Experience adalah bagian dari UI/UX Design yang berhubungan dengan pengalaman pengguna saat memakai produk tersebut. UX fokusnya bikin pengguna nyaman saat pakai website atau aplikasi tertentu. UX mencangkup gimana cara pengguna nemuin fitur yang dicari, jelas apa enggak langkah-langkahnya. Terus juga mastiin apa pengguna ngerasa puas apa nggak sama tuh produk digital. Kenapa UX Itu Penting UX nggak melulu seputar tampilan , tapi juga tentang bagaimana sebuah produk bisa menyenangkan dan memudahkan hidup penggunanya dari awal sampai akhir. Produk dengan UX yang baik akan membuat pengguna merasa nyaman, tidak bingung, dan ingin kembali menggunakannya lagi. Itulah sebabnya, di dunia UI/UX Design kamu nggak boleh mengabaikan UX. Perbedaan UI dan UX dalam UI/UX Design Meski sekilas kedengaran mirip, UI dan UX punya peran yang berbeda dalam proses UI/UX Design. UI lebih fokus ke tampilan agar produk terlihat menarik dan enak dipandang, sedangkan UX berfokus pada kenyamanan dan kepuasan pengguna saat menggunakan produk itu. Perbedaan dalam Proses dan Komponen Proses pembuatannya juga berbeda. Kamu bisa mulai UX dengan riset kebutuhan pengguna, terus lanjut bikin alur penggunaan, struktur file, sampai prototipe. Nah kalau UI baru bekerja setelahnya buat mempercantik tampilan dengan warna, gambar, dan elemen visual lainnya. Dalam dunia UI/UX komponen yang bisa kamu pakai juga berbeda. Biasanya UI nanganin seputar tombol, tipografi, sampai warna. Beda sama UX yang lebih ngurus navigasi, konten, alur interaksi, sampai strategi branding. Semua elemen ini saling melengkapi untuk menghasilkan UI/UX Design yang menarik dan fungsional. Perbedaan Tools dan Skill Kamu udah tahu kan, kalau alat yang dipakai desainer UI/UX berbeda? Seorang desainer UI biasanya memakai alat desain seperti Adobe Illustrator atau Photoshop untuk membuat tampilan yang detail. Di sisi lain, desainer UX lebih sering menggunakan alat seperti Figma atau Sketch untuk membuat prototype dan menguji pengalaman pengguna. Nggak cuma itu, skill yang dibutuhin juga beda. Kalau kamu mau jadi desainer UI, berarti kamu butuh kreatifiitas dan branding yang kuat di dunia desain. Nah, kalau mau fokus ke UX, kamu harus punya skill riset, analisis, dan pemecahan masalah agar produk yang didesain gampang digunakan. Dari penjelasan tadi, bisa disimpulkan bahwa UI/UX Design tidak bisa dipisahkan karena keduanya saling melengkapi. UI bisa bantu bikin produk digital kamu terlihat menarik secara visual. Kalau UX bisa bantuin kamu ngebuat produk digital yang nyaman dipakai. Intinya kalau cuma fokus ke salah satu aja, hasilnya bakal jauh dari kata maksimal. Nggak lucu kan kalau tampilan aplikasi kamu super bagus, tapi pengguna kebingungan cara pakainya? Sebaliknya, nggak baik juga kalau aplikasi yang kamu bikin super mudah dipahami tapi tampilannya monoton dan bosenin. Jadi kamu harus pastiin UI/UX secara bersamaan. Kalau udah maksimalin dua sisi ini, output produk digital kamu bakal memenuhi UI/UX deh.

UI/UX Design

Apa Itu Figma? Yuk, Intip Fitur Figma Hingga Cara Mendaftarnya

/

Apa Itu Figma? Apa itu Figma? Jadi Figma adalah alat atau aplikasi buat desain, spesifiknya aplikasi buat desain website. Figma populer banget dipakai buat memaksimalkan UI/UX design. Tapi jangan salah, gak cuma desainer profesional saja yang bisa pakai Figma, kamu yang masih pemula juga bisa belajar dan menggunakannya lho. Biar lebih paham, Figma itu basisnya online (cloud), jadi nggak mewajibkan penggunanya install software yang berat-berat. Kamu cukup buka browser, login, dan langsung bisa desain. Gak harus pakai laptop, pakai tablet juga bisa. Satu tambahan lagi, Figma punya fitur kolaborasi, jadi memudahkan kamu yang suka kerja sama tim dalam satu desain. Apa Aja Sih Fitur Figma? 1. Prototyping Fitur Figma yang pertama adalah prototyping. Kamu bisa mencoba desain yang sudah dibuat seakan-akan jadi aplikasi beneran. Misal, kalau kamu klik tombol “login”, nantinya kamu bisa atur biar langsung pindah ke halaman berikutnya. Istilah gampangnya, kami bisa lihat alur aplikasinya, dan menguji dulu sebelum beneran dibuat dalam bentuk kode. Hal kaya gini bisa memudahkan developer memahami desain kamu. 2. Design Tool Fitur Figma selanjutnya namanyanya design tool. Fitur satu ini disebut fitur utama buat bantu kamu bikin elemen desain. Adanya design tool ini bisa bantu kamu bikin kotak, lingkaran, sampai teks sesuai kebutuhan. Selain itu, kamu juga bisa tambahin warna, ikon, sampai komponen yang bisa membuat desainmu tampak hidup. Ditambah lagi ada fitur auto layout yang bisa bantu rapiin elemen ini agar responsif, tanpa mengatur manual satu per satu. 3. Plugin Library Fitur Figma yang ke-3 namanya plugin library. Fitur satu ini bisa kamu install gratis buat nambahin fungsi aplikasi. Contoh ada plugin yang bisa bantu kamu ambil stok gambar yang berkualitas, nyari ikon lebih cepat, sampai plugin yang bantu buat diagram otomatis. Nah, kebayang kan seberguna apa plugin, pekerjaan desain kamu pun bisa jadi efisien dah. 4. Community Files Fitur Figma yang terakhir adalah community files. Pada fitur ini kamu bakal mudah banget nyari berbagai template dan file yang sudah didesain orang lain. Kamu bisa dengan mudah download file tersebut dan mengedit sesuai selera. Community files ini sangat bermanfaat bagi pemula, apalagi yang mau belajar desain tapi bingung mau mulai dari mana. Dengan fitur satu ini, kamu bisa lebih menghemat waktu sekaligus lebih mudah dapat inspirasi dari karya-karya orang lain. Figma Bisa Digunakan Buat Apa Aja? Jawabannya banyak, mulai dari desain tampilan aplikasi website, prototype interaktif, sampai sketsa awal kaya wireframe. Selain itu, kamu juga bisa manfaatin Figma buat bikin konten visual buat medsos, atau sekedar presentasi. Menariknya lagi, kamu bisa kerjain proyek bareng teman secara real time dalam satu file yang sama. 6 Langkah Daftar Figma 1. Buka situs resmi Figma Langkah daftar Figma yang paling dasar adalah membuka situs resminya di www.figma.com. Nah kamu bisa tuh langsung mulai proses pendaftaran dengan mudah. 2. Klik Sign Up Langkah daftar Figma selanjutnya adalah klik tombol “sign up” atau “get started”, biasanya ada di halaman awal pembuatan akun. 3. Pakai Email Langkah daftar Figma selanjutnya adalah input alamat email kamu. Kalau pengen lebih cepat, bisa langsung login pakai akun Google yang kamu punya. 4. Masuk Dashboard Kalau sudah berhasil login, kamu akan diarahkan ke dashboard utama Figma. Nah, dashboard itu bakal jadi tempat utama proyek desain kamu disimpan. 5. Buat Desain Baru Sebenarnya kalau sudah masuk tahap ini, kamu tinggal mulai desain aja. Lihat dashboard dan cari opsi “New Design File”, otomatis kamu bakal dibawa ke workspace kosong buat bikin desain. 6. Eksplorasi Langkah daftar Figma yang terakhir tinggal eksplorasi aja semua fitur yang tersedia. Kalau bingung tinggal pakai template yang sudah ada. Kalau udah selesai desain, kamu punya banyak opsi buat ekspor ke format PNG, JPG, SVG, sampai PDF. Intinya, pilih sesuai kebutuhan. Itu dia pengenalan singkat dasar-dasar Figma buat pemula. Sekarang kamu sudah mulai paham kan apa itu figma, fungsi sampai cara mendaftarnya?

UI/UX Design

Prinsip Dasar UI Design: Menerapkan Hukum dan Prinsip Dasar UI Design untuk Pengalaman Pengguna Optimal

/

Di dunia digital yang serba cepat kayak sekarang, tampilan dan kenyamanan antarmuka aplikasi atau website jadi penentu utama apakah pengguna bakal betah atau malah kabur. Nah, di sinilah pentingnya memahami prinsip dasar UI design supaya pengalaman pengguna (user experience) jadi makin optimal. Yuk, kita bahas hukum dan prinsip dasar UI design yang sering dipakai para UI/UX designer buat bikin tampilan digital yang nggak cuma estetik, tapi juga enak banget dipakai. Hukum dan Prinsip Dasar UI Design 1. Fitts’s Law Hukum dan prinsip dasar UI design yang pertama namanya fitts’s law, atau makin besar makin gampang di klik. Intinya Fitt’s Law ini ngomongin seputar jarak, ukuran, sampai elemen di layar. Terus ngomongin juga segala ukuran itu dan pengaruhnya ke kecepatan pengguna dalam klik. Nah, makin besar tombolnya otomatis makin gampang orang nge-klik. Fitts’s Law pertama kali diperkenalkan oleh Paul Fitts pada tahun 1954. Cara Terapin Fitts’s Law di UI Design: 1. Bikin tombol gedean dikit: Jangan pelit ukuran buat tombol penting, apalagi di mobile. 2. Tempatin elemen penting deket-deket: Misalnya tombol “Beli Sekarang” deket sama foto produk, jadi user nggak perlu scroll jauh. 3. Minimalin gerakan pengguna: Supaya pengguna nggak capek bolak-balik layar cuma buat nyari fitur utama. Intinya, jangan bikin pengguna repot. Biar mereka cepat, praktis, dan nggak mikir dua kali pas pakai aplikasimu. 2. Hick’s Law Hukum dan prinsip UI design selanjutnya adalah Hick’s Law yang ngajarin para desainer nggak bikin terlalu banyak opsi. Intinya kalau terlalu banyak pilihan yang disajikan, maka pengguna juga bakal bingung buat ambil keputusan. Jadi ya bikin opsi seperlunya aja.Tokoh yang pertama kali ngusulin hick’s law adalah William Edmund Hick dan Ray Hyman pada tahun 1952. Hukum dan prinsip UI design yang ke-3 adalah gestalt, prinsip satu ini ngebahas cara otak manusia melihat dan menyortir elemen visual. Desain UI yang dianggap bagus harus menerapkan prinsip ini biar mudah dipahami pengguna. 1. Similarity (Kemiripan): Elemen yang mirip bentuk, warna, atau ukuran sebaiknya digabungin. Contoh: semua ikon navigasi punya warna dan gaya yang sama. 2. Proximity (Kedekatan): Elemen yang fungsinya saling nyambung, letakin deket-deket. Misal, label dan field input di form. 3. Continuity (Alur Visual): Desain alurnya harus ngalir. Mata user bisa langsung tahu kemana harus fokus duluan. 4. Closure (Penutupan): Kadang otak bisa “nutupin” bentuk yang nggak lengkap. Makanya logo simpel tetap bisa kuat banget. 3. Prinsip Gestalt Hukum dan prinsip UI design yang terakhir adalah mempertimbangkan aturan warna 60-30-10. Kenapa harus pakai aturan ini? Jawabannya biar desain nggak terlalu ramai, tapi tetap tampak elegan. Maksud aturan warna 60–30–10 adalah prinsip desain yang melibatkan penggunaan tiga palet warna dengan proporsi tertentu: 60% untuk warna dominan, 30% untuk warna sekunder, dan 10% untuk warna aksen. Gimana cara penerapannya? Gampang simak 3 tips ini: 1. 60% warna dominan: Dipakai buat background atau elemen besar. 2. 30% warna sekunder: Buat header, sidebar, atau elemen pendukung. 3. 10% warna aksen: Buat tombol, ikon, atau link yang pengen ditonjolkan. Nah, itulah beberapa prinsip dasar UI design yang bisa kamu terapkan buat ningkatin pengalaman pengguna (user experience). Intinya Desain UI yang oke nggak melulu seputar “tampil keren”, tapi soal gimana bikin pengguna ngerasa nyaman, gampang navigasi, dan mau balik lagi.

UI/UX Design

3 Tips Jadi Figma Expert: Kuasai Hi-Fi, Dokumentasi, & Desain Lanjutan

/

Sejumlah tips jadi Figma expert merupakan topik menarik bagi kamu yang suka sama dunia UI/UX design. Pasalnya, Figma jadi salah satu alat yang sangat powerfull  buat bikin desain UI/UX, jadi ningkatin kemampuan sampai level expert sangat-sangat diperlukan. Kabar baiknya, kalau kamu udah jago pakai Figma buat bikin desain antar muka, kamu ada di jalur yang bener. Tapi skill drag & drop aja masih kurang cukup buat mencapai level expert. Di artikel ini bakal dikupas mendalam 3 tips utama yang bisa kamu praktekkan biar jadi seorang Figma Expert. Penasaran apa aja tips nya, let’s check this out. 3 Tips Jadi Figma Expert 1. Kuasai Hi-Fi Interaction & Animation Tips jadi Figma expert yang pertama adalah  menguasai Hi-Fi (High Fidelity) Interaction & Animation. Pertanyaannya apa itu Hi-Fi Interaction & Animation? Gampangnya semacam teknik biar desain kamu mendekati bentuk akhir aplikasi beneran. Yup, kalau bisa lengkap juga sama interaksi plus animasi yang detail. Karena pada praktiknya,  desain nggak melulu soal tampilan. Pada level expert, kamu harus bisa buat desain yang tampak interaktif, dinamis, dan tampak realistis. Ada 3 langkah mudah biar kamu bisa terapin Hi-Fi Interaction & Animation: 2.  Dokumentasi Desain Tips jadi Figma expert selanjutnya adalah bikin dokumentasi desain. Dokumentasi bisa jadi jembatan utama buat desainer, developer, dan tim produk. Makannya, dokumentasi yang jelas sangat penting, karena tanpa dokumentasi yang memadai, desain kamu bisa disalah artikan bahkan berpotensi bikin pengembangan jadi berantakan. Supaya proses dokumentasi kamu berjalan dengan baik perhatikan point berikut: 3. Peningkatan Desain Tips jadi Figma expert satu ini kadang masih diremehkan, padahal desain nggak melulu soal estetika. Tetapi kemampuan buat berkembang dan beradaptasi. Jadi, mau-nggak mau, kamu harus meningkatkan kemampuan desain dengan banyak belajar dan berinovasi. Supaya peningkatan desain kamu berjalan sesuai harapan lakukan 3 hal ini: Nah, itu tadi 3 tips jadi Figma expert yang bisa kamu cobain. Intinya jadi pengguna Figma nggak cukup cuma tahu tools aja. Kamu juga harus ngerti dan bisa bikin komunikatif, fungsional, dan selalu update dengan trend desain terkini.

UI/UX Design

Pentingnya Desain Responsif untuk Semua Perangkat

/

Pernah nggak sih kamu buka sebuah website yang kelihatan super kece di laptop? Tapi malah jadi berantakan pas kamu buka di ponsel? Masalah kayak gitu sebenarnya bisa kamu hindari pakai desain responsif yang tepat. Yuk, kita bahas kenapa desain responsif itu penting dan gimana cara menerapkannya biar tampilannya tetap maksimal di semua perangkat! Apa Itu Desain Responsif? Secara sederhana, desain responsif adalah pendekatan desain web dan aplikasi yang bikin tampilan tetap nyaman, rapi, dan berfungsi optimal di berbagai ukuran layar.  Jadi website jenis apa pun bakal kelihatan cakep baik di laptop,komputer besar, tablet ukuran sedang, sampai ponsel kecil sekalipun. Intinya, desain responsif bisa membantu pengguna dapat pengalaman tetap konsisten, nggak peduli dari perangkat apa pun mereka akses konten. Kenapa Desain Responsif Itu Penting? 1. Pengalaman Pengguna Lebih Nyaman Kenapa desain responsif itu penting? Karena pengguna yang berkunjung ke website umumnya pakai perangkat yang berbeda. Ada yang pakai ponsel, tablet, sampai desktop. Nah, dengan desain dan tampilan yang responsif, kamu bisa membantu pengguna merasa nyaman. Mereka bahkan lebih mudah akses konten dengan mulus tanpa terganggu penampilan, apalagi ketemu tombol yang susah di klik. 2. Aksesibilitas yang Lebih Luas Kenapa desain responsif itu penting? jawabanya karena desain responsif bisa bantuin kamu. Yup, bantuin desain website dan aplikasi kamu gampang diakses. Kenapa bisa begitu? Ya, karena dengan perangkat jenis apa pun orang nyaman aksesnya. Ini sama saja kamu bisa menjangkau audience lebih luas sekaligus ningkatin engagement pengguna di website kamu. 3. Bikin Ranking SEO Meningkat Google tuh suka banget sama situs yang responsif, karena bisa bantu pengguna dapat pengalaman menyenangkan. Gak cuma itu, desain responsif juga bisa mengantisipasi duplikasi konten, baik di versi desktop maupun ponsel. Nah, hal kaya gini berguna banget buat naikin skor SEO. Cara Menerapkan Desain Responsif di Berbagai Perangkat 1. Desktop/Laptop Kalau desain di layar yang lebih luas kaya desktop, kamu punya lebih banyak ruang  buat nampilin konten dan elemen visual. Kamu maksimalin tambahan detail, gambar resolusi tinggi. Udah gitu juga bisa bikin navigasi yang mudah diakses. 2.  Tablet Umumnya desain tablet berada di ukurang sedang, atau tengah-tengah. Tata letaknya tentu lebih sederhana dari desktop, tapi pastikan tetap lebih kaya dari  ponsel. Gunakan elemen yang nyaman buat sentuhan jari dan nggak terlalu dekat. 3. Ponsel Kalau tampilan di ponsel usahain desainnya praktis dan simpel. Kamu harus pilih elemen yang gampang di-klik dengan satu tangan. Kamu juga jangan pakai teks yang kepanjangan. Terakhir bisa pakai menu hamburger atau navigasi vertikal supaya gambarnya tetap bersih. Intinya, desain responsif nggak melulu seputar tampilan yang bisa menyesuaikan ukuran layar saja. Tapi lebih dalam lagi, yaitu bagaimana memberi  kenyamanan dan pengalaman terbaik bagi pengguna. Pengalaman pengguna yang nyaman ini bisa didapatkan saat desainer nerapin prinsip responsif. Dengan prinsip ini, otomatis website atau aplikasi yang  kamu buat nggak hanya kelihatan keren, tapi bakal disukai banyak pengguna.

Scroll to Top