آموزش طراحی وب با فیگما | سطح پیشرفته - آخرین آپدیت

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

مقدمات Введение

• درباره این دوره What the course is about

• دانلود منابع دوره Download the course materials

• دوره چندزبانه This is a multilingual course

• راهنمای گذراندن دوره How to go through the course

• نحوه پرسیدن سوالات How to ask questions

تایپوگرافی Typography

• یکپارچگی مهم‌ترین اصل است Consistency is the most important thing

• اولین UX/UI جهان The very first UX/UI in the world

• تنظیمات صحیح متن در طراحی وب Proper text settings in web design

• انواع فونت‌ها Types of fonts

• چگونه برای یک پروژه فونت انتخاب کنیم How to choose a font for a project

• نحوه فرمت‌بندی خلاقانه متن How to format text creatively

• نحوه فرمت‌بندی متن در فیگما How to format text in Figma

• تمرین اول —فرمت‌بندی زیبا متن Practice #1 — Format text beautifully

• گلیف‌ها چیستند What glyphs are

• خلاصه بخش Summary of the section

سلیقه بصری و الهام‌بخشی Visual Taste & Inspiration

• دلهای طراح The designer’s dilemma

• منابع پرورش سلیقه بصری Resources for developing visual taste

• پلاگین‌های الهام‌بخش بصری Plugins for visual inspiration

• استایل‌های طراحی وب‌سایت Website design styles

• استفاده از هوش مصنوعی برای پرورش سلیقه Use AI to develop visual taste

گریدها و راهنماها Grids & Guides

• انواع گریدها Types of grids

• ساخت یک گرید غیرمتعارف Create an uncomfortable grid

• تحلیل گریدهای سایر طراحان Analyze other designers’ grids

• خلاصه —تایپوگرافی و گریدها Summary — Typography & grids

• تمرین دوم —جایگذاری محتوا در گرید Practice #2 — Place content inside a grid

• تمرین دوم —تکمیل شده (بخش اول) Practice #2 — Completed (Part 1)

• تمرین دوم —تکمیل شده (بخش دوم) Practice #2 — Completed (Part 2)

پروژه اول First Project

• تکلیف و شرح پروژه Project task and description

• نکته تکمیلی —از کجا عکس بگیریم Additional note — Where to get photos

• ساخت یک گرید مدولار Creating a modular grid

• طراحی بخش Hero، بخش اول Creating the Hero Section, Part 1

• طراحی بخش Hero، بخش دوم Creating the Hero Section, Part 2

• طراحی بخش دوم وب‌سایت Creating the second section of the website

• طراحی بخش سوم وب‌سایت Creating the third section of the website

• طراحی اولین بنر Creating the first banner

• طراحی بخش چهارم وب‌سایت Creating the fourth section of the website

• طراحی بنر دوم Creating the second banner

• طراحی بخش پنجم Creating the fifth section

• طراحی بخش ششم Creating the sixth section

• طراحی فوتر وب‌سایت Creating the website footer

• تغییر فونت و ساخت منوی ناوبری Changing the font and creating the navigation menu

• اتمام وب‌سایت Finishing the website

فاصله‌گذاری Spacing

• قانون زاویه راست The right-angle rule

• از چه مقادیری برای فاصله استفاده کنیم Which spacing values to use

• استفاده از فضای خالی (White Space) در طراحی Using empty space in design

سلسله مراتب بصری Visual Hierarchy

• سلسله مراتب بصری چیست What visual hierarchy is

• سطوح سلسله مراتب بصری Levels of visual hierarchy

• کدام المان مهم‌تر است Which element is more important

• نحوه استفاده از رنگ خاکستری How to use the color gray

• برعکس عمل کنید —حذف تاکید از المان‌های غیرضروری Do the opposite — Remove accents from unnecessary elements

• تمرین سوم —تنظیم سلسله مراتب بصری Practice #3 — Set up visual hierarchy

• تمرین سوم —تکمیل شده، بخش اول Practice #3 — Completed, Part 1

• تمرین سوم —تکمیل شده، بخش دوم Practice #3 — Completed, Part 2

حاشیه‌ها و شعاع گوشه‌ها Borders & Corner Radius

• گرد کردن گوشه‌ها باید چگونه باشد What corner rounding should be

• شعاع گوشه‌های یکپارچه Consistent corner radius

رنگ Color

• مشکل رویکرد ۶۰:۳۰:۱۰ The problem with the 60:30:10 approach

• چگونه یک طیف رنگی بسازیم How to create a color scale

• ساخت طیف رنگی در عمل Creating a color scale in practice

• قانون ۶۰:۳۰:۱۰ و طیف رنگی The 60:30:10 rule and the color scale

• مجبور نیستید فقط از سه رنگ استفاده کنید You don’t have to use only three colors

• استفاده از رنگ‌های سیستمی Use system colors

• استفاده از خاکستری گرم یا سرد Use cool or warm gray

• تداعی‌های رنگی Color associations

• نحوه استفاده از گرادینت در طراحی How to use gradients in design

• چند نکته برای کار با رنگ A couple of tips for working with color

• هوش مصنوعی و رنگ AI and Color

• تمرین چهارم —اعمال رنگ بر لایوت Practice #4 — Apply color to the layout

• تمرین چهارم —تکمیل شده، بخش اول Practice #4 — Completed, Part 1

• تمرین چهارم —تکمیل شده، بخش دوم Practice #4 — Completed, Part 2

تصاویر Images

• نحوه قرار دادن متن روی تصاویر How to place text on images

• از چه تصاویری استفاده کنیم What images to use

• نحوه کار با آیکون‌ها How to work with icons

• استفاده از اسکرین‌شات‌ها در طراحی How to use screenshots in design

هوش مصنوعی در تصاویر AI in Images

• درباره تصاویر تولید شده با هوش مصنوعی About AI-generated images

• ویژگی‌ها و قیمت‌گذاری ابزارهای AI AI features and pricing

• حذف پس‌زمینه با هوش مصنوعی Removing backgrounds with AI

• حذف اشیاء با هوش مصنوعی Removing objects with AI

• گسترش مرزهای تصویر با هوش مصنوعی Expanding image boundaries with AI

• افزایش رزولوشن تصاویر با هوش مصنوعی Increasing image resolution with AI

• ویرایش تصاویر با هوش مصنوعی Editing images with AI

• هماهنگ‌سازی تصاویر با هوش مصنوعی Harmonizing images with AI

• تولید تصاویر با هوش مصنوعی Generating images with AI

• قابلیت‌های تکمیلی هوش مصنوعی Additional AI capabilities

سایه‌ها Shadows

• درباره سایه‌ها About shadows

• تکنیک‌ها و متدهای کار با سایه Techniques and methods for working with shadows

• تمرین پنجم —اعمال صحیح افکت‌های سایه Practice #5 — Applying shadow effects correctly

طراحی موبایل Mobile Design

• ویژگی‌های طراحی موبایل Features of mobile design

• اندازه متن در دستگاه‌های موبایل Text size on mobile devices

• سایز و ترازبندی المان‌ها Sizes and alignment of elements

• تمرین ششم —تبدیل پروژه اول به موبایل Practice #6 — Adapt your first project

• تمرین ششم —تکمیل شده، بخش اول Practice #6 — Completed, Part 1

• تمرین ششم —تکمیل شده، بخش دوم Practice #6 — Completed, Part 2

• تمرین ششم —تکمیل شده، بخش سوم Practice #6 — Completed, Part 3

• تمرین ششم —تکمیل شده، بخش چهارم Practice #6 — Completed, Part 4

تکنیک‌های بصری در طراحی Visual Techniques in Design

• درباره تکنیک‌های بصری About visual techniques

• منابع مفید برای طراحان وب Useful resources for web designers

پروژه دوم Second Project

• مرور کلی و اهداف پروژه Overview and project goals

• آماده‌سازی و جستجوی رفرنس Preparation and reference search

• طراحی بخش Hero Creating the Hero Section

• طراحی منوی ناوبری Creating the navigation menu

• طراحی خطوط تزئینی Creating decorative lines

• طراحی بخش دوم وب‌سایت، بخش اول Creating the second section of the website, Part 1

• طراحی بخش دوم وب‌سایت، بخش دوم Creating the second section of the website, Part 2

• طراحی بخش سوم وب‌سایت Creating the third section of the website

• طراحی بخش چهارم وب‌سایت Creating the fourth section of the website

• طراحی فرم برای وب‌سایت Creating a form for the website

• طراحی فوتر وب‌سایت Creating the website footer

• نهایی‌سازی وب‌سایت Finalizing the website