آموزش‌های منتخب برای شروع یادگیری
آموزش‌های کاربردی طراحی رابط کاربر، تجربه کاربری و ابزارهای طراحی را دنبال کنید.
آموزش را از اینجا شروع کنید: راهنمای جامع Figma · مبانی طراحی رابط کاربر · مبانی طراحی تجربه کاربری
وبلاگ
Microinteraction و Microanimation در UI چیست؟ اصول و کاربردها
Microinteraction یک تعامل کوچک با Trigger، Feedback و State است و Microanimation می‌تواند بخش بصری آن باشد. با کاربرد، Timing، Easing و نکات طراحی تعاملات کوچک در رابط کاربری آشنا شوید.
طراحی UI موبایل؛ اصول Mobile UI، Touch Target و Responsive Design
طراحی UI موبایل فقط کوچک‌کردن نسخه دسکتاپ نیست. در این راهنما درباره Touch Target، خوانایی، Navigation، Safe Area، تفاوت پلتفرم‌ها و انتخاب Mobile-first بر اساس Context محصول می‌خوانید.
Portfolio UI/UX چیست؟ ساخت پورتفولیو و Case Study حرفه‌ای
یک پورتفولیوی UI/UX خوب باید نقش شما، مسئله، فرآیند تصمیم‌گیری و کیفیت خروجی را شفاف نشان دهد. با انتخاب پروژه، Case Study، پروژه تمرینی و اشتباهات رایج پورتفولیو آشنا شوید.
Design System چیست؟ معرفی کوتاه و اجزای اصلی
Design System مجموعه‌ای از استانداردها، اصول، Tokens، Components، Patternها، Documentation و Governance است که به تیم‌ها برای ساخت تجربه‌های منسجم و مقیاس‌پذیر کمک می‌کند.
Wireframe چیست؟ انواع وایرفریم و کاربرد آن در UI/UX
Wireframe نمایش ساده و ساختاری از صفحه یا Flow است که قبل از پرداختن به جزئیات Visual Design برای بررسی Hierarchy، محتوا و Interaction استفاده می‌شود. تفاوت Low و High Fidelity را ببینید.
Figma چیست؟ معرفی کاربردها، قابلیت‌ها و اکوسیستم Figma در ۲۰۲۶
Figma چیست و چرا در تیم‌های محصول محبوب شده است؟ در این راهنما با Figma Design، همکاری آنلاین، Auto Layout، Components، Prototype، Dev Mode و اکوسیستم فعلی Figma در ۲۰۲۶ آشنا می‌شوید.
طراحی Icon در UI؛ اصول انتخاب، ساخت و استفاده از آیکان‌ها
Icon خوب باید قابل تشخیص، منسجم و متناسب با Context باشد. با اصول Visual Weight، Grid، Style، Label، Accessibility و تصمیم بین طراحی اختصاصی و Icon Library آشنا شوید.
طراحی Form در UI؛ اصول فرم‌های قابل استفاده و دسترس‌پذیر
فرم خوب باید اطلاعات لازم را با کمترین ابهام و اصطکاک جمع کند. در این راهنما با Label، Input، Help Text، Validation، Error Message، Mobile Form و Accessibility آشنا شوید.
طراحی Button در UI؛ حالت‌ها، Hierarchy و Accessibility
Button یکی از اصلی‌ترین کنترل‌های Action در رابط است. در این راهنما Hierarchy، Label، Stateهای Hover/Pressed/Focus/Disabled/Loading، Touch Target و Accessibility دکمه را بررسی می‌کنیم.
White Space در UI چیست؟ اصول فاصله‌گذاری و Negative Space
White Space فضای خالی بی‌استفاده نیست؛ فاصله بین عناصر، متن و بخش‌ها به Grouping، خوانایی و Visual Hierarchy کمک می‌کند. با Micro/Macro Space و ساخت Spacing System آشنا شوید.