آموزش Adobe XD: طراحی وب سایت

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

مقدمه Introduction

• با سرعت فکر طراحی کنید Design at the speed of thought

• خوش آمدی Welcome

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

• با استفاده از پرونده های تمرینی Using the exercise files

1. با Adobe XD شروع کنید 1. Get Started with Adobe XD

• ایجاد سند جدید Creating a new document

• افزودن تابلوهای هنری Adding artboards

• باز کردن یک سند موجود Opening an existing document

• ذخیره سند ابر Saving a cloud document

• کار با سابقه سند Working with document history

1. ایجاد گرافیک 1. Creating Graphics

• درک فضای کاری Understanding the workspace

• ایجاد گرافیک Creating graphics

• واردات گرافیک برداری Importing vector graphics

• واردات و دستکاری گرافیک bitmap Importing and manipulating bitmap graphics

2. بررسی رابط کاربری 2. Exploring the User Interface

• طرح بندی های فضای کاری Workspace layouts

• به بوم طراحی بروید Navigate the design canvas

• تابلوها Panels

2. اضافه کردن متن و جلوه ها 2. Adding Text and Effects

• افزودن متن و فونت Adding text and fonts

• اضافه کردن شفافیت و سایه های رها Adding transparency and drop shadows

• اضافه کردن زمینه های تاری Adding blurred backgrounds

3. اصول طراحی حالت 3. Design Mode Basics

• کار با پرونده های تمرینی Working with the exercise files

• مستطیل و بیضی ابزار Rectangle and Ellipse tool

• ویژگی ها را جای گذاری کنید Paste attributes

• تبدیل اشکال به مسیرها Converting shapes to paths

• ابزار قلم Pen tool

• مسیر در مقابل خط Path vs. line

• عملیات بولی Boolean operations

• ماسک و تصاویر قرار داده شده Masks and placed images

• متن در مقابل نقطه Area vs. point text

• یک ظاهر طراحی شده متن Text styling

• رنگ ها را پر و حاشیه کنید Fill and border colors

3. ایجاد صفحات اضافی 3. Creating Additional Pages

• ایجاد صفحات اضافی Creating additional pages

• طراحی برای اندازه و سیستم عامل های مختلف صفحه نمایش Designing for different screen sizes and platforms

• با استفاده از گرافیک از کیت های UI Using graphics from UI kits

4. تکنیک های چیدمان 4. Layout Techniques

• راهنماها Guides

• شبکه ها Grids

• تراز کردن اشیا Aligning objects

• جای خود را بچسبانید Paste in place

• لایه گذاری Padding

• پشته ها Stacks

• پاسخگو تغییر اندازه Responsive Resize

• شبکه را تکرار کنید Repeat Grid

4- تکرار محتوا با استفاده از تکرار شبکه 4. Repeating Content Using Repeat Grid

• ساخت یک شبکه تکراری Making a Repeat Grid

• اضافه کردن تصاویر منحصر به فرد برای هر عنصر شبکه تکرار Adding unique images for each Repeat Grid element

• با استفاده از تکرار شبکه برای صفحه درباره Using Repeat Grid for an About page

• ایجاد چندین صفحه برای نمونه سازی Creating multiple pages for prototyping

5. کار با قطعات 5. Working with Components

• تعریف م componentsلفه ها Defining components

• مبادله قطعات را انجام دهید Swap components

• تعریف و استفاده از حالت های م componentلفه Defining and leveraging component states

5- نمونه سازی 5. Prototyping

• نمونه سازی یک تعامل ساده Prototyping a simple interaction

• نمونه سازی یک وب سایت کامل Prototyping an entire website

6. همکاری در طراحی 6. Design Collaboration

• گردش کار Illustrator Illustrator workflows

• نرم افزار آدوبی فتوشاپ Adobe Photoshop

• برنامه طرح Sketch app

• ادغام کتابخانه CC CC Library integration

• هماهنگی Coediting

6. اشتراک و صادرات 6. Sharing and Exporting

• ایجاد یک فیلم از تعامل Creating a video of interactions

• به اشتراک گذاری نمونه اولیه Sharing a prototype

• صادرات artboard و دارایی Exporting artboards and assets

7. سیستم های طراحی و سازمان دارایی 7. Design Systems and Asset Organization

• فیلتر ، مرتب سازی و جستجو در صفحه دارایی ها Filter, sort, and search in the Assets panel

• استخراج رنگها و سبک های کاراکتر برای استفاده مجدد Extracting colors and character styles for reuse

• آشکار کردن دارایی ها روی بوم طرح Revealing assets on the design canvas

• معرفی سیستم های طراحی Design systems introduction

• پیوند دارایی ها Linking assets

• تبدیل کتابخانه های طرح Converting Sketch Libraries

نتیجه Conclusion

• خداحافظ Goodbye

• مراحل بعدی Next steps