آموزش اصول طراحی 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