آموزش Adobe XD برای طراحی وب: اصول اساسی برای UI و UX [ویدئو]

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

شروع کار با طراحی وب Getting Started with Web Design

• معرفی Introduction

• معرفی Introduction

• پاسخ سریع به سوالات رایج Quick Answers to Popular Questions

• پاسخ سریع به سوالات رایج Quick Answers to Popular Questions

• طراحی وب - آنچه شما باید بدانید Web design - What You Need to Know

• طراحی وب - آنچه شما باید بدانید Web design - What You Need to Know

• نحوه انتخاب لایه ها مانند یک طراح حرفه ای How to Select Layers like a Professional Designer

• نحوه انتخاب لایه ها مانند یک طراح حرفه ای How to Select Layers like a Professional Designer

• تمرین: انتخاب خود را تمرین کنید Exercise: Practice Your Selecting

• تمرین: انتخاب خود را تمرین کنید Exercise: Practice Your Selecting

• در اینجا چیزی است که کدگذارها با طراحی های ما انجام می دهند Here's what Coders Do with Our Designs

• در اینجا چیزی است که کدگذارها با طراحی های ما انجام می دهند Here's what Coders Do with Our Designs

• تمرین: مهارت ها و توجه به جزئیات خود را بیازمایید Exercise: Test Your Skills and Attention to Detail

• تمرین: مهارت ها و توجه به جزئیات خود را بیازمایید Exercise: Test Your Skills and Attention to Detail

• حل تمرین قبلی Solving the Previous Exercise

• حل تمرین قبلی Solving the Previous Exercise

• سه کلید برای تبدیل شدن به یک طراح وب عالی The Three Keys to Becoming a Great Web Designer

• سه کلید برای تبدیل شدن به یک طراح وب عالی The Three Keys to Becoming a Great Web Designer

اولین پروژه کامل طراحی وب سایت ریسپانسیو ما Our First Complete Responsive Website Design Project

• مهم ترین سوال هنگام شروع یک پروژه جدید The Most Important Question when Starting a New Project

• مهم ترین سوال هنگام شروع یک پروژه جدید The Most Important Question when Starting a New Project

• چگونه برای پروژه خود تحقیق و الهام بگیرید How to Research/Find Inspiration for Your Project

• چگونه برای پروژه خود تحقیق و الهام بگیرید How to Research/Find Inspiration for Your Project

• مهم ترین قسمت چیدمان را تنظیم کنید Set Up the Most Important Part of the Layout

• مهم ترین قسمت چیدمان را تنظیم کنید Set Up the Most Important Part of the Layout

• نوار بالا را ایجاد کنید Create the Top Bar

• نوار بالا را ایجاد کنید Create the Top Bar

• نحوه انتخاب فونت برای پروژه How to Choose Fonts for Your Project

• نحوه انتخاب فونت برای پروژه How to Choose Fonts for Your Project

• چگونه رنگ های زیبا را انتخاب کنیم How to Choose Beautiful Colors

• چگونه رنگ های زیبا را انتخاب کنیم How to Choose Beautiful Colors

• نوار بالا را سازماندهی کنید Organize the Top Bar

• نوار بالا را سازماندهی کنید Organize the Top Bar

• ساختار هدر را ایجاد کنید Create the Structure for the Header

• ساختار هدر را ایجاد کنید Create the Structure for the Header

• یک سبک برای سربرگ تنظیم کنید Set a Style for the Header

• یک سبک برای سربرگ تنظیم کنید Set a Style for the Header

• توجه به جزئیات در هدر Attention to Detail in the Header

• توجه به جزئیات در هدر Attention to Detail in the Header

• ساخت منطقه قهرمان بزرگ Building a Great Hero Area

• ساخت منطقه قهرمان بزرگ Building a Great Hero Area

• طراحی مجدد منوی دسته ها Redesign the Categories Menu

• طراحی مجدد منوی دسته ها Redesign the Categories Menu

• نحوه نمایش تمام جزئیات محصول در یک شبکه How to Display All the Product Details in a Grid

• نحوه نمایش تمام جزئیات محصول در یک شبکه How to Display All the Product Details in a Grid

• در اینجا نحوه یافتن بهترین چیدمان برای شبکه محصولات آورده شده است Here's How You Find the Best Layout for the Grid of Products

• در اینجا نحوه یافتن بهترین چیدمان برای شبکه محصولات آورده شده است Here's How You Find the Best Layout for the Grid of Products

• اولین نسخه کارت محصول را ایجاد کنید Create the First Version of the Product Card

• اولین نسخه کارت محصول را ایجاد کنید Create the First Version of the Product Card

• نسخه دوم کارت محصول The Second Version of the Product Card

• نسخه دوم کارت محصول The Second Version of the Product Card

• نسخه سوم کارت محصول The Third Version of the Product Card

• نسخه سوم کارت محصول The Third Version of the Product Card

• چگونه یک بخش سؤالات متداول تمیز و مدرن طراحی کنیم How to Design a Clean and Modern FAQ Section

• چگونه یک بخش سؤالات متداول تمیز و مدرن طراحی کنیم How to Design a Clean and Modern FAQ Section

• یک فرم ثبت نام در خبرنامه ایجاد کنید Create a Newsletter Sign Up Form

• یک فرم ثبت نام در خبرنامه ایجاد کنید Create a Newsletter Sign Up Form

• چگونه یک پاورقی زیبا طراحی کنیم How to Design a Beautiful Footer

• چگونه یک پاورقی زیبا طراحی کنیم How to Design a Beautiful Footer

• تغییرات نهایی و افکار در مورد صفحه اصلی Final Variation and Thoughts About the Homepage

• تغییرات نهایی و افکار در مورد صفحه اصلی Final Variation and Thoughts About the Homepage

اولین پروژه کامل طراحی وب سایت ریسپانسیو ما Our First Complete Responsive Website Design Project

نحوه ایجاد صفحات داخلی How to Create Interior Pages

• تجزیه و تحلیل چگونگی بهبود صفحه محصول Analyzing How We can Improve the Product Page

• تجزیه و تحلیل چگونگی بهبود صفحه محصول Analyzing How We can Improve the Product Page

• تنظیم طرح بندی برای قسمت بالای صفحه محصول Setting Up the Layout for the Top Part of the Product Page

• تنظیم طرح بندی برای قسمت بالای صفحه محصول Setting Up the Layout for the Top Part of the Product Page

• چگونه اطلاعات زیادی را در صفحه محصول سازماندهی کنیم How to Organize Lots of Information on the Product's Page

• چگونه اطلاعات زیادی را در صفحه محصول سازماندهی کنیم How to Organize Lots of Information on the Product's Page

• نحوه اضافه کردن جزئیات کوچک که تفاوت ایجاد می کنند How to Add Small Details that Make a Difference

• نحوه اضافه کردن جزئیات کوچک که تفاوت ایجاد می کنند How to Add Small Details that Make a Difference

• چگونه حجم زیادی از متن را مدیریت کنیم How to Handle Large Quantities of Text

• چگونه حجم زیادی از متن را مدیریت کنیم How to Handle Large Quantities of Text

• ایجاد نوار کناری Creating the Sidebar

• ایجاد نوار کناری Creating the Sidebar

نحوه ایجاد صفحات داخلی How to Create Interior Pages

نحوه ایجاد یک طراحی واکنش گرا How to Create a Responsive Design

• مقدمه ای بر نسخه موبایل Introduction to the Mobile Version

• مقدمه ای بر نسخه موبایل Introduction to the Mobile Version

• نحوه راه اندازی نسخه موبایل برای صفحه اصلی How to Start the Mobile Version for the Homepage

• نحوه راه اندازی نسخه موبایل برای صفحه اصلی How to Start the Mobile Version for the Homepage

• نحوه تنظیم نوار بالا برای نسخه موبایل How to Adjust the Top Bar for the Mobile Version

• نحوه تنظیم نوار بالا برای نسخه موبایل How to Adjust the Top Bar for the Mobile Version

• در اینجا نحوه ایجاد هدر برای نسخه موبایل آورده شده است Here's How You Create the Header for the Mobile Version

• در اینجا نحوه ایجاد هدر برای نسخه موبایل آورده شده است Here's How You Create the Header for the Mobile Version

• ناحیه قهرمان و دسته بندی ها را برای نسخه موبایل تغییر دهید Modify the Hero Area and Categories for the Mobile Version

• ناحیه قهرمان و دسته بندی ها را برای نسخه موبایل تغییر دهید Modify the Hero Area and Categories for the Mobile Version

• بهبود ناوبری برای تجربه موبایل Improve the Navigation for the Mobile Experience

• بهبود ناوبری برای تجربه موبایل Improve the Navigation for the Mobile Experience

• شبکه ای از محصولات مناسب برای نسخه موبایل ایجاد کنید Create a Grid of Products Suited for the Mobile Version

• شبکه ای از محصولات مناسب برای نسخه موبایل ایجاد کنید Create a Grid of Products Suited for the Mobile Version

• تکمیل شبکه محصولات – نسخه موبایل Finishing the Grid of Products – Mobile Version

• تکمیل شبکه محصولات – نسخه موبایل Finishing the Grid of Products – Mobile Version

• خواندن متن را در بخش پرسش‌های متداول آسان کنید Make the Text Easy to Read in the FAQ Section

• خواندن متن را در بخش پرسش‌های متداول آسان کنید Make the Text Easy to Read in the FAQ Section

• نحوه درست کردن فرم خبرنامه متناسب با نسخه موبایل How to Make the Newsletter Form Fit the Mobile Version

• نحوه درست کردن فرم خبرنامه متناسب با نسخه موبایل How to Make the Newsletter Form Fit the Mobile Version

• یک طرح بندی جدید برای پاورقی ایجاد کنید Make a New Layout for the Footer

• یک طرح بندی جدید برای پاورقی ایجاد کنید Make a New Layout for the Footer

• نتیجه گیری: نسخه موبایل تجارت الکترونیک Conclusions: E-Commerce Mobile Version

• نتیجه گیری: نسخه موبایل تجارت الکترونیک Conclusions: E-Commerce Mobile Version

نحوه ایجاد یک طراحی واکنش گرا How to Create a Responsive Design

طراحی ریسپانسیو برای صفحات داخلی Responsive Design for Interior Pages

• نسخه موبایل برای صفحه محصول The Mobile Version for the Product's Page

• نسخه موبایل برای صفحه محصول The Mobile Version for the Product's Page

• ساختار موبایل را برای صفحه محصول ایجاد کنید Create the Mobile Structure for the Product's Page

• ساختار موبایل را برای صفحه محصول ایجاد کنید Create the Mobile Structure for the Product's Page

• چگونه به اقلام از نظر اهمیت سبک بسازیم How to Style Items in Terms of their Importance

• چگونه به اقلام از نظر اهمیت سبک بسازیم How to Style Items in Terms of their Importance

• یک تغییر برای بهبود فروش ایجاد کنید Create a Variation to Improve Sales

• یک تغییر برای بهبود فروش ایجاد کنید Create a Variation to Improve Sales

• 10٪ کار بیشتر برای 50٪ نتایج بهتر 10% More Work for 50% Better Results

• 10٪ کار بیشتر برای 50٪ نتایج بهتر 10% More Work for 50% Better Results

• یک طرح بندی دیگر برای صفحه محصول ایجاد کنید Create Another Layout for the Product's Page

• یک طرح بندی دیگر برای صفحه محصول ایجاد کنید Create Another Layout for the Product's Page

• یک ساختار هوشمندتر برای نسخه موبایل بسازید Make a Smarter Structure for the Mobile Version

• یک ساختار هوشمندتر برای نسخه موبایل بسازید Make a Smarter Structure for the Mobile Version

• نظرات و برگه های تغذیه ایجاد کنید Create Reviews and Nutritional Tabs

• نظرات و برگه های تغذیه ایجاد کنید Create Reviews and Nutritional Tabs

• اضافه کردن جزئیات کوچک مهم Adding Small Details that Matter

• اضافه کردن جزئیات کوچک مهم Adding Small Details that Matter

• بررسی طراحی روی یک گوشی واقعی Checking the Design on a Real Phone

• بررسی طراحی روی یک گوشی واقعی Checking the Design on a Real Phone

• تغییرات باورنکردنی در هیچ زمان Incredible Variations in No Time at All

• تغییرات باورنکردنی در هیچ زمان Incredible Variations in No Time at All

طراحی ریسپانسیو برای صفحات داخلی Responsive Design for Interior Pages

طرح را برای کدنویسی آماده کنید Prepare the Design for Coding

• آماده سازی طرح برای کدنویسی Preparing the Design for Coding

• آماده سازی طرح برای کدنویسی Preparing the Design for Coding

• چگونه به کدنویس آنچه را که از Adobe XD نیاز دارد، بدهیم How to Give the Coder what They Need from Adobe XD

• چگونه به کدنویس آنچه را که از Adobe XD نیاز دارد، بدهیم How to Give the Coder what They Need from Adobe XD

• نحوه آماده سازی گرافیک برای کدنویسی How to Prepare Graphics for Coding

• نحوه آماده سازی گرافیک برای کدنویسی How to Prepare Graphics for Coding

• محتوای سمت سرور و گرافیک چند لایه Server-Side Content and Multi-Layer Graphics

• محتوای سمت سرور و گرافیک چند لایه Server-Side Content and Multi-Layer Graphics

• بلند شدن و دویدن با زپلین Getting Up and Running with Zeplin

• بلند شدن و دویدن با زپلین Getting Up and Running with Zeplin

• بهترین راه برای مدیریت دارایی ها برای کدنویس ها Best Way to Handle Assets for the Coders

• بهترین راه برای مدیریت دارایی ها برای کدنویس ها Best Way to Handle Assets for the Coders

• در اینجا این است که چرا ضروری است آنچه را که لازم است ارائه دهید Here's Why it is Essential You Deliver what is Needed

• در اینجا این است که چرا ضروری است آنچه را که لازم است ارائه دهید Here's Why it is Essential You Deliver what is Needed

• چگونه برنامه نویس پروژه ها را می بیند How the Coder Sees the Projects

• چگونه برنامه نویس پروژه ها را می بیند How the Coder Sees the Projects

طرح را برای کدنویسی آماده کنید Prepare the Design for Coding

اولین کلید برای تبدیل شدن به یک طراح وب عالی The First Key to Becoming a Great Web Designer

• اولین رکن طراحی وب سایت The First Pillar of Web Design

• اولین رکن طراحی وب سایت The First Pillar of Web Design

• بهترین تنظیمات برای یک پروژه طراحی وب Best Settings for a Web Design Project

• بهترین تنظیمات برای یک پروژه طراحی وب Best Settings for a Web Design Project

• مطالعه موردی: طرح‌بندی‌های غیر استاندارد Case Study: Non-Standard Layouts

• مطالعه موردی: طرح‌بندی‌های غیر استاندارد Case Study: Non-Standard Layouts

• تمرین: یک طرح بندی وب سایت استاندارد ایجاد کنید Exercise: Create a Standard Website Layout

• تمرین: یک طرح بندی وب سایت استاندارد ایجاد کنید Exercise: Create a Standard Website Layout

• چگونه عناصر وب خود را به درستی اندازه گیری کنیم How to Size Your Web Elements Correctly

• چگونه عناصر وب خود را به درستی اندازه گیری کنیم How to Size Your Web Elements Correctly

• فرمول من برای متن کامل My Formula for Perfect Text

• فرمول من برای متن کامل My Formula for Perfect Text

• مطالعه موردی: لایه های متن Case Study: Text Layers

• مطالعه موردی: لایه های متن Case Study: Text Layers

• کنتراست رنگ Color Contrast

• کنتراست رنگ Color Contrast

• مطالعه موردی: رنگ ها – قسمت 1 Case Study: Colors – Part 1

• مطالعه موردی: رنگ ها – قسمت 1 Case Study: Colors – Part 1

• مطالعه موردی: رنگ ها - قسمت 2 Case Study: Colors – Part 2

• مطالعه موردی: رنگ ها - قسمت 2 Case Study: Colors – Part 2

• نحوه تراز کردن عناصر در ناحیه قهرمان How to Align Elements in the Hero Area

• نحوه تراز کردن عناصر در ناحیه قهرمان How to Align Elements in the Hero Area

• 3 قانون برای آیکون های طراحی وب 3 Rules for Web Design Icons

• 3 قانون برای آیکون های طراحی وب 3 Rules for Web Design Icons

• مطالعه موردی: تعادل بصری Case Study: Visual Balance

• مطالعه موردی: تعادل بصری Case Study: Visual Balance

• ایده هایی در مورد اولین رکن طراحی وب سایت Thoughts on the First Pillar of Web Design

• ایده هایی در مورد اولین رکن طراحی وب سایت Thoughts on the First Pillar of Web Design

اولین کلید برای تبدیل شدن به یک طراح وب عالی The First Key to Becoming a Great Web Designer

کلید دوم برای تبدیل شدن به یک طراح وب عالی The Second Key to Becoming a Great Web Designer

• معرفی Introduction

• معرفی Introduction

• نکته وب سایت چیست؟ What's the Point of the Website?

• نکته وب سایت چیست؟ What's the Point of the Website?

• کاربر در مقابل صاحب کسب و کار The User Versus the Business Owner

• کاربر در مقابل صاحب کسب و کار The User Versus the Business Owner

• تجزیه و تحلیل در طراحی وب سایت Analytics in Web Design

• تجزیه و تحلیل در طراحی وب سایت Analytics in Web Design

• قالب ها و سازندگان وب سایت – مرگ طراح وب؟ Templates and Website Builders – the Web Designer's Death?

• قالب ها و سازندگان وب سایت – مرگ طراح وب؟ Templates and Website Builders – the Web Designer's Death?

• مطالعه موردی: 4 نسخه از همان وب سایت Case Study: 4 Versions of the Same Website

• مطالعه موردی: 4 نسخه از همان وب سایت Case Study: 4 Versions of the Same Website

• طرح بندی صفحه اصلی تجارت الکترونیک E-Commerce Homepage Layout

• طرح بندی صفحه اصلی تجارت الکترونیک E-Commerce Homepage Layout

• جزئیات محصول تجارت الکترونیک E-Commerce Product Details

• جزئیات محصول تجارت الکترونیک E-Commerce Product Details

• تسویه حساب تجارت الکترونیک E-Commerce Checkout

• تسویه حساب تجارت الکترونیک E-Commerce Checkout

• چرا وب سایت ها Pixel Perfect نیستند؟ Why aren't Websites Pixel Perfect?

• چرا وب سایت ها Pixel Perfect نیستند؟ Why aren't Websites Pixel Perfect?

• صفحه فرود در مقابل یک وب سایت Landing Page Versus a Website

• صفحه فرود در مقابل یک وب سایت Landing Page Versus a Website

• مطالعات موردی: نیازهای مشتری Case Studies: the Client's Needs

• مطالعات موردی: نیازهای مشتری Case Studies: the Client's Needs

• نسل پیشرو در صفحات فرود Lead Generation in Landing Pages

• نسل پیشرو در صفحات فرود Lead Generation in Landing Pages

• چرا صفحات فرود شهرت بدی دارند؟ Why Landing Pages Have a Bad Reputation

• چرا صفحات فرود شهرت بدی دارند؟ Why Landing Pages Have a Bad Reputation

• صفحه فرود محصول دیجیتال Digital Product Landing Page

• صفحه فرود محصول دیجیتال Digital Product Landing Page

• A/B تست صفحات فرود A/B Testing Landing Pages

• A/B تست صفحات فرود A/B Testing Landing Pages

• مطالعه موردی: تحلیل صفحه فرود Case Study: Landing Page Analysis

• مطالعه موردی: تحلیل صفحه فرود Case Study: Landing Page Analysis

• نظرات نهایی در مورد نیازهای مشتری Final Thoughts About the Client's Needs

• نظرات نهایی در مورد نیازهای مشتری Final Thoughts About the Client's Needs

کلید دوم برای تبدیل شدن به یک طراح وب عالی The Second Key to Becoming a Great Web Designer

کلید سوم برای تبدیل شدن به یک طراح وب عالی The Third Key to Becoming a Great Web Designer

• معرفی Introduction

• معرفی Introduction

• UX چیست؟ What is UX?

• UX چیست؟ What is UX?

• بهترین مثال از UX خوب و توجه به جزئیات The Best Example of Good UX and Attention to Detail

• بهترین مثال از UX خوب و توجه به جزئیات The Best Example of Good UX and Attention to Detail

• فرآیند پرداخت را بهبود بخشید تا فروش را دو برابر کنید Improve the Checkout Process to Double Sales

• فرآیند پرداخت را بهبود بخشید تا فروش را دو برابر کنید Improve the Checkout Process to Double Sales

• نسخه موبایل را به دو برابر افزایش دهید Improve the Mobile Version to Double Sales

• نسخه موبایل را به دو برابر افزایش دهید Improve the Mobile Version to Double Sales

• 7 ترفند وب سایت که توجه به جزئیات را نشان می دهد 7 Website Tweaks that Show Attention to Detail

• 7 ترفند وب سایت که توجه به جزئیات را نشان می دهد 7 Website Tweaks that Show Attention to Detail

• ارتقاء صفحه محصول موبایل Upgrading the Mobile Product Page

• ارتقاء صفحه محصول موبایل Upgrading the Mobile Product Page

• انجام جلسات 1 به 1 با کدگذار Doing 1-on-1 Sessions with a Coder

• انجام جلسات 1 به 1 با کدگذار Doing 1-on-1 Sessions with a Coder

کلید سوم برای تبدیل شدن به یک طراح وب عالی The Third Key to Becoming a Great Web Designer

نتیجه گیری دوره Course Conclusion

• بعدش چی؟ What's next?

• بعدش چی؟ What's next?

نتیجه گیری دوره Course Conclusion