آموزش Adobe XD Masterclass: طراحی UI و UX طراحی وب را بیاموزید

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

شروع شدن Getting Started

• معرفی Introduction

• چگونه از این آموزش بیشترین بهره را ببرید How to get the most out of this training

• تمامی منابع دوره را دانلود کنید Download all the resources from the course

• با Adobe XD شروع کنید Get started with Adobe XD

• اولین طرح خود را در Adobe XD ایجاد کنید Create your first design in Adobe XD

• Adobe XD در مقابل فتوشاپ Adobe XD vs Photoshop

• نحوه دور زدن Adobe XD How to get around Adobe XD

• بهترین راه برای انتخاب لایه ها در XD Best way to select layers in XD

• تمرین: انتخاب خود را تمرین کنید Exercise: Practice your selecting

• از Photoshop یا Illustrator گرفته تا Adobe XD! From Photoshop or Illustrator to Adobe XD!

• اسناد ابری و ذخیره کار شما Cloud documents and saving your work

• Adobe XD عجیب و غریب است Adobe XD quirks

• نتیجه گیری بخش Section conclusions

ابزارها و ویژگی های Adobe XD Adobe XD's tools and features

• معرفی Introduction

• نحوه کار با مستطیل ها مانند یک حرفه ای How to work with rectangles like a pro

• بهترین روش کار با تصاویر Best way to work with images

• چگونه یک ارائه مدرن طراحی کنیم How to design a modern presentation

• از ابزارهای بیضی، چندضلعی و خط استفاده کنید Use the ellipse, polygon and line tools

• نحوه ویرایش اشکال در Adobe XD How to edit shapes in Adobe XD

• ابزار Pen را در XD کشف کنید Discover the Pen tool in XD

• اشکال هندسی ایجاد کنید Create geometric shapes

• متنی را به ارائه ما اضافه کنید Add text to our presentation

• با رنگ ها و شیب ها کار کنید Work with colors and gradients

• شبکه‌ها، راهنماها، راهنماهای هوشمند – طرح‌های کامل پیکسلی Grids, guides, smart guides – pixel perfect designs

• ابزار تراز - نمای کلی The alignment tools - Overview

• نحوه استفاده از ابزارهای تراز How to use the alignment tools

• یک کولاژ ایجاد کنید Create a collage

• بیایید لذت ببریم - از همه ابزارها استفاده کنید Let’s have fun – use all the tools

• نتیجه گیری بخش Section conclusions

ذخیره و صادرات کار شما Saving and exporting your work

• کار ما را به عنوان PNG صادر کنیم Export our work as PNGs

• کار خود را برای دریافت بازخورد به اشتراک بگذارید Share your work to get feedback

• اختیاری - ارائه ها را به صورت PDF ذخیره کنید Optional - Save presentations as PDFs

• کار خود را با توسعه دهندگان به اشتراک بگذارید Share your work with developers

• PNG و JPEG خود را بدون از دست دادن کیفیت کوچک کنید Shrink your PNGs and JPEGs without losing quality

ویژگی های پیشرفته Adobe XD Adobe XD advanced features

• معرفی Introduction

• طراحی سریع با شبکه تکرار Fast designing with repeat grid

• به سرعت مطالب را جایگزین کنید Quickly replace content

• اجزاء - یک ویژگی انقلابی Components – a revolutionary feature

• کار با اجزا را تمرین کنید Practice working with components

• چرا باید در مورد راهنماهای سبک صحبت کنیم Why we need to talk about style guides

• چگونه استفاده از رنگ خود را شارژ کنید How to supercharge your color use

• نحوه کار با سبک شخصیت How to work with character styles

• در اینجا نحوه تنظیم پانل دارایی های خود را مشاهده می کنید Here’s how you actually set up your assets panel

• روشی هوشمندانه برای کار با دارایی های مرتبط A smarter way to work with linked assets

• تصمیم نگرفتم؟ چندین نسخه را نگه دارید! Undecided? Keep multiple versions!

• کار با چندین طراح به طور همزمان Working with several designers AT ONCE

• نتیجه گیری بخش Section conclusion

اولین پروژه طراحی وب سایت First web design project

• معرفی اولین پروژه طراحی وب ما Introduction to our first web design project

• هدر وب سایت را ایجاد کنید Create the website’s header

• توصیه من برای نمادهای کامل رسانه های اجتماعی My advice for perfect social media icons

• تنظیم تایپوگرافی ما Setting our typography

• افزودن نوار جستجو Adding the search bar

• دسته بندی های وب سایت The website’s categories

• منطقه محتوا را با شبکه تکرار بسازید Build the content area with repeat grid

• صفحه بندی از طریق اجزای XD Pagination through XD components

• پاورقی را ایجاد کنید Create the footer

• نمای کلی از صفحه اصلی Overview of the homepage

• صفحه جزئیات محصول را ایجاد کنید Create the product details page

• کارهای پایانی در صفحه جزئیات محصول Finishing touches on the product details page

طراحی تعاملی Responsive design

• طراحی واکنشگرا چیست؟ What is responsive design?

• طراحی بدون کدنویسی: چرا و چگونه؟ Designing without coding: why and how?

• ساختن نسخه موبایل صفحه اصلی Making the mobile version of the homepage

• تنظیم طراحی برای نسخه موبایل Adjusting the design for the mobile version

• در حال ویرایش پاورقی برای نسخه موبایل Editing the footer for the mobile version

• نسخه موبایل را برای صفحه جزئیات محصول ایجاد کنید Create the mobile version for the product details page

• تنوع طرح شماره 1 - رنگ Design variation #1 - color

• تنوع طراحی شماره 2 - تایپوگرافی Design variation #2 – typography

• تنوع طراحی شماره 3 - طرح Design variation #3 – the layout

• نکات کلیدی در مورد طراحی ما Key things about our design

طراحی را تعاملی کنید (نمونه سازی) Make the design interactive (prototyping)

• مقدمه ای بر نمونه سازی Introduction to prototyping

• اصول سیم کشی یک نمونه اولیه The fundamentals of wiring a prototype

• انواع ماشه در Adobe XD Trigger types in Adobe XD

• انیمیشن های انتقال و تسهیل Transition Animations and Easing

• متحرک سازی خودکار - تغییر باور نکردنی بازی Auto-animate – the incredible game changer

• متحرک سازی خودکار و کشیدن Auto-animate and drag

• تابلوی هنری قبلی - یک الزام در هر پروژه بزرگ Previous artboard – a must in any large project

• چگونه منوها و پاپ آپ ها را واقعی جلوه دهیم How to make menus and pop ups seem real

• با "Scroll To" به بخشی از طراحی خود بروید Jump to a part of your design with “Scroll To”

• اینجاست که چرا انیمیشن های شما اهمیتی ندارند Here’s why your animations don’t matter

نمونه سازی پیشرفته Advanced Prototyping

• اینجاست که چرا باید طرح خود را متحرک کنیم Here’s why we should animate our design

• چه چیزی را باید متحرک کنید و چه چیزی را نباید متحرک کنید What you should and shouldn’t animate

• حالت های شناور را برای رسانه های اجتماعی و منوی اصلی ایجاد کنید Create hover states for social media & main menu

• نمونه سازی جعبه جستجو - حالت شناور و پایین + کشویی Prototyping the search box – hover and down state + drop-down

• یک حالت شناور برای شبکه تکرار ایجاد کنید Create a hover state for the repeat grid

• تنظیم صفحه بندی و پاورقی Setting up the pagination and footer

• چگونه به سرعت طرح خود را با پشته ها تغییر دهید How to quickly change your layout with stacks

• موارد اضافی: ناوبری را به کار ببرید Extras: Make the navigation work

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

• اولین رکن طراحی وب The first pillar of web design

• بهترین تنظیمات برای یک پروژه طراحی وب Best settings for a web design project

• مطالعه موردی: طرح‌بندی‌های غیر استاندارد Case study: Non-standard layouts

• تمرین: یک طرح بندی وب سایت استاندارد ایجاد کنید Exercise: Create a standard website layout

• نحوه اندازه گیری صحیح عناصر وب How to size your web elements correctly

• فرمول من برای متن کامل My formula for perfect text

• مطالعه موردی: لایه های متن Case study: text layers

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

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

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

• نحوه تراز کردن عناصر در ناحیه قهرمان How to align elements in the hero area

• 3 قانون برای آیکون های طراحی وب 3 rules for web design icons

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

• نکاتی در مورد رکن اول طراحی وب سایت Thoughts on the first pillar of web design

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

• معرفی Introduction

• هدف وب سایت چیست؟ What’s the point of the website?

• کاربر در مقابل مالک کسب و کار The user versus the business owner

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

• قالب ها و سازندگان وب سایت – مرگ طراح وب؟ Templates & Website Builders – The web designer’s death?

• مطالعه موردی: 4 نسخه از یک وب سایت Case Study: 4 versions of the same website

• طرح بندی صفحه اصلی تجارت الکترونیک E-commerce homepage layout

• جزئیات محصول تجارت الکترونیک E-commerce product details

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

• چرا وب سایت ها پیکسل کامل نیستند؟ Why aren’t websites pixel perfect?

• صفحه فرود در مقابل وب سایت Landing page vs a website

• مطالعات موردی: نیازهای مشتری Case studies: the client’s needs

• تولید سرنخ در صفحات فرود Lead generation in landing pages

• چرا صفحات فرود شهرت بدی دارند؟ Why landing pages have a bad reputation

• صفحه فرود محصول دیجیتال Digital product landing page

• صفحات فرود تست A/B A/B testing landing pages

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

• افکار نهایی در مورد نیازهای مشتری Final thoughts about the client’s needs

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

• معرفی Introduction

• UX چیست؟ What's UX?

• فرآیند پرداخت را بهبود بخشید تا فروش را دو برابر کنید Improve the checkout process to double sales

• نسخه موبایل را بهبود دهید تا فروش دو برابر شود Improve the mobile version to double sales

• 7 ترفند وب سایت که توجه به جزئیات را نشان می دهد 7 website tweaks that show attention to detail

• ارتقاء صفحه محصول موبایل Upgrading the mobile product page

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

• Bad UX بسیار گران است Bad UX is very expensive

• بهترین نمونه از UX خوب و توجه به جزئیات The best example of good UX and attention to detail

• مطالعه موردی UX - فرم ها UX case study – forms

• مطالعه موردی UX - نمادها UX case study – icons

• مطالعه موردی UX - اقدامات مبهم UX case study – vague actions

• مطالعه موردی UX – سلسله مراتب UX case study – hierarchy

• مطالعه موردی UX – محتوای جعلی UX case study – fake content

• مطالعه موردی UX – دکمه ها UX case study – buttons

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

• تمام منابع را از اینجا دانلود کنید Download all the resources here

• مهم ترین سوال هنگام شروع یک پروژه جدید The most important question when starting a new project

• چگونه برای پروژه خود تحقیق و الهام بگیرید How to research/find inspiration for your project

• مهمترین قسمت چیدمان را تنظیم کنید Set up the most important part of the layout

• نوار بالا را ایجاد کنید Create the top bar

• نحوه انتخاب فونت برای پروژه How to choose fonts for your project

• چگونه رنگ های زیبا را انتخاب کنیم How to choose beautiful colors

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

• ساختار هدر را ایجاد کنید Create the structure for the header

• یک سبک برای هدر تنظیم کنید Set a style for the header

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

• ساخت منطقه قهرمان بزرگ Building a great hero area

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

• نحوه نمایش تمام جزئیات محصول در یک شبکه How to display all the product details in a grid

• در اینجا نحوه یافتن بهترین طرح بندی برای شبکه محصولات آمده است Here’s how you find the best layout for the grid of products

• اولین نسخه کارت محصول را ایجاد کنید Create the first version of the product card

• نسخه دوم کارت محصول The second version of the product card

• نسخه سوم کارت محصول The third version of the product card

• چگونه یک بخش سوالات متداول تمیز و مدرن طراحی کنیم How to design a clean and modern FAQ section

• یک فرم ثبت نام در خبرنامه ایجاد کنید Create a newsletter sign up form

• چگونه یک فوتر زیبا طراحی کنیم How to design a beautiful footer

• تغییرات نهایی و افکار در مورد صفحه اصلی Final variation and thoughts about the homepage

• پروژه نهایی را از اینجا دانلود کنید DOWNLOAD THE FINAL PROJECT HERE

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

• تجزیه و تحلیل چگونگی بهبود صفحه محصول Analysing how we can improve the product page

• تنظیم طرح بندی برای قسمت بالای صفحه محصول Setting up the layout for the top part of the product page

• چگونه اطلاعات زیادی را در صفحه محصول سازماندهی کنیم How to organize lots of information in the product’s page

• نحوه اضافه کردن جزئیات کوچک که تفاوت ایجاد می کند How to add small details that make a difference

• نحوه مدیریت حجم زیاد متن How to handle large quantities of text

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

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

• معرفی نسخه موبایل Introduction to the mobile version

• نحوه شروع نسخه موبایل برای صفحه اصلی How to start the mobile version for the homepage

• نحوه تنظیم نوار بالا برای نسخه موبایل How to adjust the top bar for the mobile version

• در اینجا نحوه ایجاد هدر برای نسخه موبایل آمده است Here’s how you create the header for the mobile version

• ناحیه قهرمان و دسته بندی ها را برای نسخه موبایل تغییر دهید Modify the hero area & categories for the mobile version

• ناوبری را برای تجربه تلفن همراه بهبود دهید Improve the navigation for the mobile experience

• یک شبکه از محصولات مناسب برای نسخه موبایل ایجاد کنید Create a grid of products suited for the mobile version

• تکمیل شبکه محصولات – نسخه موبایل Finishing the grid of products – mobile version

• خواندن متن را در بخش پرسش و پاسخ آسان کنید Make the text easy to read in the FAQ section

• نحوه درست کردن فرم خبرنامه متناسب با نسخه موبایل How to make the newsletter form fit the mobile version

• یک طرح جدید برای فوتر ایجاد کنید Make a new layout for the footer

• نتیجه گیری: نسخه موبایل تجارت الکترونیک Conclusions: e-commerce mobile version

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

• نسخه موبایل برای صفحه محصول The mobile version for the product’s page

• ساختار موبایل را برای صفحه محصول ایجاد کنید Create the mobile structure for the product’s page

• نحوه استایل دادن به وسایل از نظر اهمیت How to style items in terms of their importance

• برای بهبود فروش، تنوع ایجاد کنید Create a variation to improve sales

• 10% کار بیشتر برای 50% نتایج بهتر 10% more work for 50% better results

• طرح بندی دیگری برای صفحه محصول ایجاد کنید Create another layout for the product’s page

• ساختار هوشمندتری برای نسخه موبایل بسازید Make a smarter structure for the mobile version

• نظرات و برگه های تغذیه را ایجاد کنید Create the reviews and nutritional tabs

• اضافه کردن جزئیات کوچک مهم Adding small details that matter

• بررسی طرح روی گوشی واقعی Checking the design on a real phone

• تغییرات باورنکردنی در هیچ زمان Incredible variations in no time at all

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

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

• چگونه به کدگذار آنچه را که از Adobe XD نیاز دارد، بدهیم How to give the coder what he needs from Adobe XD

• نحوه آماده سازی گرافیک برای کدنویسی How to prepare graphics for coding

• محتوای سمت سرور و گرافیک چند لایه Server-side content and multi-layer graphics

• بلند شدن و دویدن با زپلین Getting up and running with Zeplin

• بهترین راه برای مدیریت دارایی ها برای کدنویس ها Best way to handle assets for the coders

• در اینجا دلیل ضروری است که آنچه مورد نیاز است را تحویل دهید Here’s why it’s essential you deliver what’s needed

• چگونه کدنویس پروژه ها را می بیند How the coder sees the projects

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

• قبل از شروع کار آزاد این کار را انجام دهید Do this before you start freelancing

• در ادامه به شما پیشنهاد می کنم این کار را انجام دهید Here's what I suggest you do next

• مسابقه نهایی Final quiz