آموزش اصول طراحی UI/UX - آخرین آپدیت

دانلود UI/UX Design Principles

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: این دوره به معرفی مفاهیم و ابزارهای کلیدی طراحی رابط کاربری (UI) و تجربه کاربری (UX) می‌پردازد. شما یاد خواهید گرفت که چگونه طرح‌های کاربرمحور و ریسپانسیو (واکنش‌گرا) را با استفاده از وایرفریمینگ، پروتوتایپینگ و بهره‌گیری از مایکروسافت کوپایلت (Microsoft Copilot) برای بهینه‌سازی CSS و بهبود جریان کاری ایجاد کنید. در پایان این برنامه آموزشی، شما قادر خواهید بود: مفاهیم پایه طراحی UI/UX، ابزارهای طراحی و طراحی ریسپانسیو را تعریف کنید. اصول بنیادی طراحی، وایرفریمینگ، نمونه‌سازی (Prototyping) و تکنیک‌های تست طراحی ریسپانسیو را شرح دهید. طراحی کاربرمحور، ملاحظات دسترسی‌پذیری (Accessibility)، موکاپ‌های با کیفیت بالا (High-fidelity) و اصول طراحی Mobile-First را توصیف کنید. از مایکروسافت کوپایلت برای نوشتن و ارتقای CSS، تولید پیشنهادهای طراحی ریسپانسیو و بهبود طراحی UI/UX در محیط‌های عملی استفاده کنید.

سرفصل ها و درس ها

اصول طراحی UI/UX Principles of UI/UX Design

  • معرفی دوره Course Introduction

  • معرفی مدرس Instructor Introduction

  • بررسی کلی سرفصل‌های دوره The What’s What of the Course

  • تکمیل آزمایشگاه‌های هدایت شده (Guided Labs) Completing the Guided Labs

  • معرفی ابزار هوش مصنوعی: مایکروسافت کوپایلت Introducing the AI Tool: Microsoft Copilot

  • چگونه در این برنامه آموزشی موفق شویم How to Be Successful in This Program

  • معرفی پروژه Introduction to the Project

  • آشنایی با اصول UI/UX Introduction to Principles of UI/UX

  • طراحی UI/UX چیست؟ What is UI/UX Design?

  • رابطه بین UI و UX The Relationship Between UI and UX

  • اهمیت طراحی UI/UX The Importance of UI/UX Design

  • تعادل و تضاد (Balance and Contrast) Balance and Contrast

  • ترازبندی و نزدیکی (Alignment and Proximity) Alignment and Proximity

  • سلسله‌مراتب و تکرار (Hierarchy and Repetition) Hierarchy and Repetition

  • نیازهای کاربر در توسعه فرانت‌اند User Needs in Front-End Development

  • ایجاد و استفاده از پرسونای کاربر Creating and Using User Personas

  • طراحی برای قابلیت استفاده (Usability) Designing for Usability

  • دسترسی‌پذیری در UI/UX Accessibility in UI/UX

  • دستورالعمل‌های دسترسی‌پذیری برای مهندسان فرانت‌اند Accessibility Guidelines for Front-End Engineers

  • تکنیک‌های عملی دسترسی‌پذیری Practical Accessibility Techniques

  • بهبود دسترسی‌پذیری یک صفحه وب موجود با CSS و HTML Enhancing Accessibility of an Existing Web Page with CSS and HTML

  • تفکر طراحی (Design Thinking) برای مهندسان فرانت‌اند Design Thinking for Front-End Engineers

  • مراحل فرآیند تفکر طراحی Stages of the Design Thinking Process

  • به‌کارگیری تفکر طراحی در چالش‌های واقعی فرانت‌اند Applying Design Thinking to Real-World Front-End Challenges

  • جمع‌بندی: اصول طراحی UI/UX Conclusion: Principles of UI/UX Design

استفاده از ابزارهای طراحی مانند Figma یا Adobe XD برای ساخت موکاپ Using Design Tools like Figma or Adobe XD for Mockups

  • مقدمه‌ای بر استفاده از ابزارهای طراحی مانند Figma یا Adobe XD برای موکاپ Introduction to Using Design Tools like Figma or Adobe XD for Mockups

  • نمونه‌سازی (Prototyping) Prototyping

  • اصول طراحی تعاملی (Interaction Design) Principles of Interaction Design

  • پروتوتایپینگ برای توسعه فرانت‌اند Prototyping for Front-End Development

  • معرفی ابزارهای طراحی Introduction to Design Tools

  • ویژگی‌های کلیدی Figma و Adobe XD Key Features of Figma and Adobe XD

  • استفاده از ابزارهای طراحی برای توسعه Using Design Tools for Development

  • نقش وایرفریم‌ها در طراحی The Role of Wireframes in Design

  • ابزارها و تکنیک‌های ایجاد وایرفریم Tools and Techniques for Creating Wireframes

  • بهترین روش‌های وایرفریمینگ Best Practices in Wireframing

  • تبدیل وایرفریم به موکاپ‌های با کیفیت بالا (High-Fidelity) From Wireframes to High-Fidelity Mockups

  • عناصر کلیدی موکاپ‌های High-Fidelity Key Elements of High-Fidelity Mockups

  • ابزارهای ساخت موکاپ‌های High-Fidelity Tools for Creating High-Fidelity Mockups

  • اهمیت همکاری در طراحی The Importance of Collaboration in Design

  • ابزارهای همکاری و دریافت بازخورد Tools for Collaboration and Feedback

  • بهترین روش‌ها برای طراحی مشارکتی Best Practices for Collaborative Design

  • جمع‌بندی: استفاده از ابزارهای طراحی برای ساخت موکاپ Conclusion: Using Design Tools like Figma or Adobe XD for Mockups

پیاده‌سازی طراحی ریسپانسیو با استفاده از CSS Implementing Responsive Design Using CSS

  • مقدمه: پیاده‌سازی طراحی ریسپانسیو با CSS Introduction: Implementing Responsive Design Using CSS

  • طراحی ریسپانسیو (واکنش‌گرا) Responsive Design

  • بررسی مزایای کلیدی پیاده‌سازی طراحی ریسپانسیو Describe the Key Benefits of Implementing Responsive Design

  • تفاوت‌های رویکرد طراحی ریسپانسیو و تطبیقی (Adaptive) Differences Between Responsive and Adaptive Design Approaches

  • مدیا کوئری‌ها (Media Queries) Media Queries

  • موارد استفاده رایج از مدیا کوئری‌ها Common Use Cases for Media Queries

  • بهترین روش‌های نوشتن مدیا کوئری Best Practices for Writing Media Queries

  • ساخت یک صفحه وب ریسپانسیو با استفاده از مدیا کوئری Creating a Responsive Webpage Using Media Queries

  • استفاده از Flexbox برای طراحی ریسپانسیو Using Flexbox for Responsive Design

  • استفاده از CSS Grid برای طراحی ریسپانسیو Using CSS Grid for Responsive Design

  • ترکیب Flexbox و Grid برای چیدمان‌های پیچیده Combining Flexbox and Grid for Complex Layouts

  • ساخت Layoutهای ریسپانسیو با Flexbox و Grid Building Responsive Layouts with Flexbox and Grid

  • طراحی Mobile-First چیست؟ What is Mobile-First Design?

  • مزایای طراحی Mobile-First Benefits of Mobile-First Design

  • پیاده‌سازی عملی طراحی Mobile-First Implementing Mobile-First Design in Practice

  • ابزارهای تست طراحی ریسپانسیو Tools for Testing Responsive Design

  • بهترین روش‌ها برای تست ریسپانسیو Best Practices for Responsive Testing

  • مستندسازی و رفع مشکلات ریسپانسیو Documenting and Addressing Responsive Issues

  • جمع‌بندی: پیاده‌سازی طراحی ریسپانسیو با CSS Conclusion: Implementing Responsive Design Using CSS

استفاده از مایکروسافت کوپایلت برای تولید CSS و پیشنهادهای طراحی Using Microsoft Copilot for Generating CSS and Design Suggestions

  • مقدمه: استفاده از مایکروسافت کوپایلت برای تولید CSS و پیشنهادهای طراحی Introduction: Using Microsoft Copilot for Generating CSS and Design Suggestions

  • آشنایی با استفاده از Copilot برای CSS Introduction to Using Copilot for CSS

  • تولید تکنیک‌های پیشرفته CSS با Copilot Generating Advanced CSS Techniques with Copilot

  • بهینه‌سازی کدهای CSS موجود Optimizing Existing CSS Code

  • طراحی ریسپانسیو با کمک Copilot Responsive Design with Copilot

  • پیاده‌سازی پیشنهادهای طراحی ریسپانسیو Copilot Implementing Copilot's Responsive Design Suggestions

  • ارزیابی بهبودهای طراحی ریسپانسیو Evaluating Responsive Design Enhancements

  • ارتقای تعامل کاربر با کمک Copilot Enhancing User Interaction with Copilot

  • بهبود زیبایی‌های بصری با Copilot Improving Visual Aesthetics with Copilot

  • به‌کارگیری بازخوردها برای بهینه‌سازی UI/UX Incorporating Feedback to Optimize UI/UX

  • ادغام Copilot در جریان کاری روزانه Integrating Copilot into Daily Workflow

  • استفاده از Copilot برای مدیریت پروژه Using Copilot for Project Management

  • نهایی کردن پروژه طراحی با Copilot Finalizing a Design Project with Copilot

  • جمع‌بندی دوره: اصول UI/UX Course Conclusion: UI/UX Principles

نمایش نظرات

آموزش اصول طراحی UI/UX
جزییات دوره
29h 1m
75
(آخرین آپدیت)
2,777
- از 5
دارد
دارد
دارد
Microsoft
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar