آموزش ملزومات طراحی تجربه کاربری - Adobe XD UI UX Design

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

شروع شدن Getting Started

• شروع کار با پروژه Adobe XD. Getting started with your Adobe XD project.

• Adobe XD برای چیست و آیا برنامه نویسی را انجام می دهد What is Adobe XD for & does it do the coding

• تفاوت بین UI و UX در Adobe XD چیست؟ What's the difference between UI and UX in Adobe XD

• آنچه ما در این دوره آموزشی Adobe XD می سازیم What we are making in this Adobe XD course

• جریان شخصیت و وظیفه در طراحی UX چیست؟ What is a persona & task flow in UX design

• کلاس پروژه 01 - مختصر خود را ایجاد کنید Class Project 01 - Create your own brief

• کلاس پروژه 01 - مختصر خود را ایجاد کنید Class Project 01 - Create your own brief

وایرفریمینگ با وفاداری پایین Wireframing Low Fidelity

• Lo Fi Wireframe در مقابل High Fidelity در Adobe XD چیست؟ What is Lo Fi Wireframe vs High Fidelity in Adobe XD

• تابلوهای هنری و پهنای وب‌سایت یا برنامه من در Adobe XD چقدر باید باشد Artboards & how wide should my website or app be in Adobe XD

معرفی نوع، رنگ و نماد Type, Color & Icon Introduction

• کار با تایپ در وایرفریم های XD Working with type in your XD wireframes

• مستطیل ها، دایره ها، دکمه ها و گوشه های گرد در Adobe XD Rectangles, Circles, Buttons and Rounded corners in Adobe XD

• نحوه استفاده از رنگ در Adobe XD How to use color in Adobe XD

• Strokes & Copy & Paste ظاهر در Adobe XD Strokes & copy & paste appearance in Adobe XD

• کلاس پروژه 02 - Wireframe Class Project 02 - Wireframe

• کلاس پروژه 02 - Wireframe Class Project 02 - Wireframe

• نمادهای رایگان برای پروژه های Adobe XD و UX UI شما Free icons for your Adobe XD & UX UI projects

• نحوه یافتن و استفاده از کیت های رابط کاربری موجود در Adobe XD How to find and use existing UI kits in Adobe XD

• آیکون های ویرایش گروه ها و مشکلات در Adobe XD Groups & issues editing icons in Adobe XD

• کلاس پروژه 03 - نمادها Class Project 03 - Icons

• کلاس پروژه 03 - نمادها Class Project 03 - Icons

نمونه سازی - سطح 1 Prototyping - Level 1

• نحوه افزودن تعامل به نمونه اولیه خود در Adobe XD How to add interaction to your prototype in Adobe XD

• نمونه اولیه انیمیشن و آسان سازی در Adobe XD Prototype animation & easing in Adobe XD

• چگونه طراحی خود را در برنامه XD در iPhone و Android ببینید How see your design on XD App on iPhone & Android

• کلاس پروژه 04 - تست بر روی تلفن شما Class Project 04 - Testing on your phone

• پروژه کلاس 04 - تست روی گوشی شما Class project 04 - Testing on your phone

انیمیشن Animation

• شروع کار با انیمیشن های خودکار در Adobe XD Getting started with auto-animations in Adobe XD

• آشنایی بیشتر با انیمیشن در Adobe XD Understanding more about animation in Adobe XD

• کلاس پروژه 05 - اولین انیمیشن من Class Project 05 - My first animation

• پروژه کلاس 05 - اولین انیمیشن من Class project 05 - My first animation

بازخورد و اظهار نظر Feedback & Commenting

• اشتراک گذاری Wireframes برای نظرات در Adobe XD Sharing Wireframes for comments in Adobe XD

Moodboard - طراحی رابط کاربری با وفاداری بالا Moodboard - High Fidelity UI Design

• تابلوهای حالت و منابع برای طراحی رابط کاربری با وفاداری در Adobe XD Mood Boards & resources for Hi fidelity UI design in Adobe XD

• نحوه ایجاد یک تابلوی خلق و خو در Adobe XD How to create a mood board in Adobe XD

• پروژه کلاس 06 - هیئت خلق و خو Class project 06 - Mood Board

• کلاس پروژه 06 - Moodboard Class Project 06 - Moodboard

• نحوه کار با Columns & Grids در Adobe XD How to work with Columns & Grids in Adobe XD

ستون ها و شبکه ها Columns & Grids

• در Adobe XD پورت با نام خط چین را در صفحه مشاهده کنید View port aka dotted line on the page in Adobe XD

• نحوه افزودن و حذف راهنماها به Adobe XD How to add & delete guides to Adobe XD

رنگ ها Colors

• رنگ الهام بخش و قطره چکان در XD Color Inspiration & the eyedropper in XD

• نحوه ایجاد یک پالت رنگ در Adobe XD How to create a color palette in Adobe XD

• نحوه ایجاد گرادینت در Adobe XD How to create gradients in Adobe XD

• نحوه ذخیره و استفاده مجدد از نمونه های رنگی در Adobe XD How to save and reused color swatches in Adobe XD

• کلاس پروژه 07 - رنگ ها و ستون ها Class Project 07 - Colors & Columns

• کلاس پروژه 07 - رنگ ها و ستون ها Class Project 07 - Colors & Columns

متن و فونت - سطح 2 Text & Fonts - Level 2

• از چه فونت هایی می توانم در طراحی وب یا برنامه خود در Adobe XD استفاده کنم What fonts can I use in my web or app design in Adobe XD

• بررسی کنید که افراد دیگر از چه فونت هایی استفاده کرده اند Check what other font’s people have used

• چه اندازه فونت های رایجی را در طراحی وب انتخاب کنم What common font sizes should I choose in web design

• نحوه ایجاد سبک شخصیت در Adobe XD How to make Character Styles in Adobe XD

• پلاگین - اضافه کردن اولین پلاگین Lorem Ipsum به Adobe XD Plugin - Adding our first Plugin Lorem Ipsum to Adobe XD

• پروژه کلاس 08 - متن Class project 08 - Text

• کلاس پروژه 08 - متن Class Project 08 - Text

طراحی Drawing

• طراحی و ویرایش اشکال در Adobe XD Drawing & editing shapes in Adobe XD

• عجیب بودن با اشکال در Adobe XD Strangeness with shapes in Adobe XD

• آموزش طراحی با ابزار pen در Adobe XD Learn to draw with the pen tool in Adobe XD

• کار با strokes و خطوط در Adobe XD Working with strokes & lines in Adobe XD

• کلاس پروژه 09 - نمادها و دکمه ها Class Project 09 - Icons & Buttons

• کلاس پروژه 09 - نمادها و دکمه ها Class Project 09 - Icons & Buttons

کار با ایلوستریتور Working with Illustrator

• آیا باید Illustrator را با Adobe XD بشناسم؟ Do I need to know Illustrator with Adobe XD

تصاویر Images

• پوشش و برش تصاویر در Adobe XD Masking & cropping images in Adobe XD

• تصاویر رایگان برای استفاده در مدل های XD خود - Unsplash Pexels Freeimage Free images to use in your XD mockups - Unsplash Pexels Freeimage

• تیره کردن تصاویر پس زمینه با کدورت در XD Darkening background images with opacity in XD

• محو کردن پس زمینه و اشیاء در Adobe XD Blurring backgrounds and objects in Adobe XD

کار با فتوشاپ Working with Photoshop

• آیا باید فتوشاپ را با Adobe XD بدانم؟ Do I need to know Photoshop with Adobe XD

• نوار اسنک بنرها را با استفاده از تصویر ماسک شده در Adobe XD تست کنید Snack bar Toast banners using masked image in Adobe XD

• کلاس پروژه 10 - اضافه کردن تصاویر Class Project 10 - Add images

• پروژه کلاس 10 - تصاویر Class Project 10 - Images

مولفه ها و نمونه ها Components & Instances

• نحوه ساخت و استفاده از کامپوننت ها در Adobe XD How to make & use components in Adobe XD

• تفاوت بین اجزای اصلی و نمونه در Adobe XD Difference between Main & Instance Components in Adobe XD

• نحوه ایجاد حالت شناور کامپوننت در XD How to create component hover states in XD

• کلاس پروژه 11 - دکمه ها Class Project 11 - Buttons

• کلاس پروژه 11 - دکمه ها Class Project 11 - Buttons

شبکه های تکراری Repeat Grids

• نحوه استفاده از شبکه تکرار در Adobe XD How to use the repeat grid in Adobe XD

• پروژه کلاس 12 - شبکه تکرار Class Project 12 - Repeat Grid

• پروژه کلاس 12 - شبکه تکرار Class Project 12 - Repeat Grid

• به روز رسانی و مشکلات با شبکه های تکراری لبه Updating & issues with repeat grids of the edge

پشته ها Stacks

• نحوه استفاده از پشته ها در XD برای ایجاد فرم How to use stacks in XD to make a form

• Class Project 13 - Stacks & Checkout Page Class Project 13 - Stacks & Checkout Page

• Class Project 13 - Stacks & Checkout Page Class Project 13 - Stacks & Checkout Page

تعاملات میکرو و انیمیشن ها Micro Interactions & Animations

• تفاوت بین انیمیشن و تعاملات خرد The difference between animation & micro interactions

• دان در حال طراحی چیزهایی در Adobe XD Dan drawing stuff in Adobe XD

• انیمیشن های بیشتر در Adobe XD More animation in Adobe XD

• پروژه کلاس 14 - انیمیشن دوم من Class Project 14 - My Second Animation

• پروژه کلاس 14 - انیمیشن دوم من Class Project 14 - My Second Animation

• سوئیچ تعویض تعامل میکرو در Adobe XD Micro interaction toggle switch in Adobe XD

• منوی برگر تعامل میکرو در XD به یک ضربدر تبدیل شد Micro interaction burger menu turned into a cross in XD

• پروژه کلاس 15 - تعامل خرد Class Project 15 - Micro interaction

• پروژه کلاس 15 - تعامل خرد Class Project 15 - Micro interaction

نحوه پین ​​کردن ناوبری به بالا در Adobe XD How to pin navigation to the top in Adobe XD

• نحوه پین ​​کردن ناوبری به بالا در Adobe XD How to pin navigation to the top in Adobe XD

• نحوه اضافه کردن مودال همپوشانی پاپ آپ در Adobe XD How to add a popup overlay modal in Adobe XD

• روی همپوشانی منوی ناوبری موبایل در Adobe XD اسلاید کنید Slide in mobile nav menu overlay in Adobe XD

• پروژه کلاس 16 - پنجره بازشو و پیمایش Class Project 16 - Popup & Navigation

• پروژه کلاس 16 - پنجره بازشو و پیمایش Class Project 16 - Popup & Navigation

• Flow ها در Adobe XD چیست؟ What are Flows in Adobe XD

صادرات Exporting

• چگونه سند خود را با مشتریان و سهامداران و آزمایش کنندگان کاربر به اشتراک بگذارید How to share your document with clients & stakeholders & user testers

• در اوایل فرآیند طراحی XD با توسعه دهنده خود صحبت کنید Talking to your developer early in the XD design process

• فرمت های فایل تصویری مناسب را از Adobe XD صادر کنید Export the right image file formats from Adobe XD

• با استفاده از Mark for Export در XD، تصاویر را همزمان صادر کنید Batch export images at once using Mark for Export in XD

• نحوه صادرات کد در XD برای مهندسان با استفاده از مشخصات طراحی How to export code in XD for engineers using Design Specs

• راهنمای سبک در Adobe XD چیست؟ What is a style guide in Adobe XD

• پروژه کلاس 17 - طراحی نهایی Class Project 17 - Final Design

• پروژه کلاس 17 - طراحی نهایی Class Project 17 - Final Design

بعدش چی What Next

• بعد از Adobe XD Essentials چه اتفاقی می افتد Whats next after Adobe XD Essentials