دوره آموزشی Penpot برای طراحی تجربه کاربری (UX)
3 ساعت 14 دقیقهمتوسط2024-12-02
مدرسین

Tom Green
Teacher, Author, Professor
جزئیات دوره
این دوره عملی که برای طراحان، توسعهدهندگان و ذینفعان پروژه طراحی شده است، شما را از طریق ویژگیهای پلتفرم Penpot راهنمایی میکند. با استفاده از این دوره، با داشبورد، رابط کاربری و منوهای ابزارهای Penpot آشنا خواهید شد تا بتوانید به راحتی در این برنامه پیمایش کنید. به طراحی بردها، وایرفریمها، چینشهای گرید و پروتوتایپهای تعاملی بپردازید. یاد بگیرید چگونه متنها را اضافه کرده و قالببندی کنید، کامپوننتها بسازید و از کتابخانههای خارجی برای بهبود پروژههای خود استفاده کنید. همچنین به بررسی استفاده از چینشهای فلکس، چینشهای CSS grid و مدیریت تعاملات پیچیده برای طراحیهای کاملاً تعاملی خواهید پرداخت. بهترین شیوهها برای همکاری تیمی و انتقال مؤثر به توسعهدهندگان با استفاده از ویژگیهای بازرسی و صادرات Penpot نیز در این دوره پوشش داده میشود. در پایان دوره، شما مهارتهایی را برای ایجاد و مدیریت پروژههای طراحی حرفهای در Penpot به طور مؤثر خواهید آموخت.
اهداف یادگیری:
آشنایی با داشبورد و رابط کاربری Penpot: یادگیری نحوه دسترسی و استفاده از منوها و ابزارها در Penpot.
طراحی بردها، وایرفریمها و پروتوتایپهای تعاملی: ایجاد طرحهای اولیه و تعاملی برای پروژههای طراحی.
کار با چینشها و گریدها: استفاده از چینشهای فلکس و CSS grid برای طراحی صفحات پیچیده.
ایجاد و قالببندی متن و کامپوننتها: نحوه افزودن متنها و طراحی کامپوننتهای قابل استفاده مجدد.
استفاده از کتابخانههای خارجی در پروژهها: بهبود پروژهها با استفاده از کتابخانههای اضافی و منابع بیرونی.
مدیریت تعاملات پیچیده و طراحیهای تعاملی: طراحی و اجرای تعاملات پیچیده و داینامیک برای پروژهها.
تسهیل همکاری تیمی و انتقال به توسعهدهندگان: استفاده از ابزارهای بازرسی و صادرات برای انتقال صحیح طراحیها به تیم توسعه.
اهداف یادگیری:
آشنایی با داشبورد و رابط کاربری Penpot: یادگیری نحوه دسترسی و استفاده از منوها و ابزارها در Penpot.
طراحی بردها، وایرفریمها و پروتوتایپهای تعاملی: ایجاد طرحهای اولیه و تعاملی برای پروژههای طراحی.
کار با چینشها و گریدها: استفاده از چینشهای فلکس و CSS grid برای طراحی صفحات پیچیده.
ایجاد و قالببندی متن و کامپوننتها: نحوه افزودن متنها و طراحی کامپوننتهای قابل استفاده مجدد.
استفاده از کتابخانههای خارجی در پروژهها: بهبود پروژهها با استفاده از کتابخانههای اضافی و منابع بیرونی.
مدیریت تعاملات پیچیده و طراحیهای تعاملی: طراحی و اجرای تعاملات پیچیده و داینامیک برای پروژهها.
تسهیل همکاری تیمی و انتقال به توسعهدهندگان: استفاده از ابزارهای بازرسی و صادرات برای انتقال صحیح طراحیها به تیم توسعه.
مهارت ها
UX DesignUser ExperienceWeb DevelopmentDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - Penpot چیست
- 02 - استفاده از فایلهای تمرین
1. رابط Penpot
- 03 - داشبورد Penpot
- 04 - پروژهها در Penpot
- 05 - پیش نویسهای Penpot
- 06 - تیمها در Penpot
- 07 - کتابخانههای پنپات
- 08 - استفاده از فونتها در Penpot
- 09 - ابزار Penpot
- 10 - قالبها در Penpot
- 11 - منوی Penpot
- 12 - حالت تاریک حالت روشن در Penpot
2. تابلوهای پنپات
- 13 - ایجاد و استفاده از تابلوها
- 14 - شبکه
- 15 - یک شبکه آیفون ایجاد کنید
- 16 - راهنماها و گرید Penpot
3. Wireframing در Penpot
- 17 - با استفاده از اشکال اولیه یک وایرفریم ایجاد کنید
- 18 - با استفاده از کامپوننتها یک Wireframe ایجاد کنید
- 19 - با استفاده از یک کتابخانه یک Wireframe ایجاد کنید
4. ایجاد یک شبکه CSS
- 20 - یک صفحه وب ایجاد کنید
- 21 - افزودن محتوا
- 22 - قالببندی متن
- 23 - استفاده از ابزار Penpot
- 24 - نمای کلی از پنل خواص
5 ایجاد طرح بندی فلکس
- 25 - چیدمان flex در Penpot چیست
- 26 - نحوه ایجاد یک طرح انعطاف پذیر
6. یک صفحه برنامه بسازید
- 27 - یک صفحه برنامه ایجاد کنید
- 28 - یک صفحه نمایش آیفون بسازید
- 29 - یک صفحه اندروید بسازید
7. ایجاد کامپوننت در Penpot
- 30 - نحوه ایجاد کامپوننت دکمه ای
- 31 - یک کتابخانه مؤلفه ایجاد کنید
- 32 - تعویض اجزا در Penpot
8. اضافه کردن تعامل
- 33 - نحوه استفاده از حالت نمونه اولیه
- 34 - تعامل پیچیده
- 35 - استفاده از همپوشانی برای ایجاد دکمه تعاملی 3 حالته
- 36 - اجزای تعاملی
9. پروژههای Penpot عملی
- 37 - نحوه ایجاد منوی اسلاید در
- 38 - نحوه ایجاد یک شبکه تکراری در Penpot
- 39 - کاوش ترکیبها و بولی ها
- 40 - نحوه مدیریت اجزای محلی
- 41 - حرکت جعلی
- 42 - یک برنامه بسازید
10. Export پروژههای Penpot
- 43 - استفاده از پنل بازرسی Penpot
- 44 - استفاده از قابلیت Export Penpot
نتیجه گیری
- 45 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی مبانی تجربه کاربری چابک (Agile UX)
- دوره آموزشی گسترش طراحی فیگما با ادوبی کریتیو کلود
- دوره آموزشی چجوری انیمیشنهای Lottie رو توی فیگما استفاده کنیم
- دوره آموزشی طراحی تجربه کاربری (UX) با هوش مصنوعی مولد و ابزار Uizard
- دوره آموزشی ساخت انیمیشنها و گرافیکهای تعاملی با Rive
- دوره آموزشی نوآوری با طراحی هوش مصنوعی با استفاده از وسایل نقلیه خودران
- دوره آموزشی طراحی مبتنی بر داده: شروع کار با تحلیل وب در تجربه کاربری (UX)
- دوره آموزشی زیباییشناسی طراحی برای تجربههای وب