آموزش Figma for Web Design: Master UI/UX در Figma | دوره A-Z

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

با Figma شروع کنید Get started with Figma

• معرفی Introduction

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

• Figma چیست و آیا بهتر از سایر برنامه های طراحی است؟ What is Figma and is it better than other design programs?

• چگونه سریع کمک بگیریم How to get help fast

• صفحه خوش آمدگویی در Figma The welcome screen in Figma

• شروع کار با Figma Getting started with Figma

• بهترین راه برای حرکت در Figma Best ways to move around in Figma

• تمرین: نحوه حرکت دادن عناصر به اطراف Exercise: how to move elements around

• حل تمرین و چند نکته حرفه ای Solving the exercise and a few pro tips

• رابط Figma را کشف کنید و چرا حرفه ای ها از آن استفاده می کنند Discover Figma’s interface & why professionals use it

• اولین وب سایت کوچک خود را ایجاد کنید Create your first mini website

• مسابقه 1: وب سایت کوچک خودتان Contest 1: Your own mini website

• ویرایش آیکون ها: رنگ ها و اندازه ها Editing icons: colors & size

• در اینجا به همین دلیل است که بسیاری از مبتدیان منصرف می شوند Here's why so many beginners give up

• چرا کد نمی نویسم (و قصد ندارم) Why I don’t code (and I don’t plan to)

مهم ترین چیزها را در مورد Figma کشف کنید Discover the most important things about Figma

• معرفی Introduction

• بزرگترین تفاوت در Figma در مقابل سایر برنامه ها The biggest difference in Figma versus other programs

• در اینجا نحوه ایجاد دکمه ها در Figma آمده است Here’s how you create buttons in Figma

• اصول کار با رنگ The basics of working with color

• چگونه مانند یک حرفه ای با رنگ کار کنیم How to work with color like a pro

• نحوه اضافه کردن تصاویر: قاب در مقابل مستطیل How to add images: frames vs rectangles

• یک گالری/کلاژ در Figma ایجاد کنید Create a gallery / collage in Figma

• نحوه ماسک زدن در فیگما How to mask in Figma

• در اینجا 3 نوع متن در Figma آورده شده است Here are the 3 types of text in Figma

• ویژگی های لایه های متن را کشف کنید Discover the properties of text layers

• چگونه مانند یک حرفه ای با متن کار کنیم How to work with text like a pro

• افکت‌ها در Figma: تاری، سایه‌ها و موارد دیگر Effects in Figma: blur, shadows & more

• هر آنچه که باید در مورد شبکه ها بدانید Everything you need to know about grids

• مروری بر اجزاء An overview of components

• پیش نویس ها و پروژه ها در Figma Drafts & Projects in Figma

• اینجا شما را به یک طراح وب خوب تبدیل می کند Here’s makes you a good web designer

• نتیجه گیری Conclusions

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

• معرفی Introduction

• نسخه دسکتاپ را به روش صحیح تنظیم کنید Set up the desktop version the correct way

• سربرگ را ایجاد کنید Create the header

• منوی اصلی را ایجاد کنید Create the main menu

• کادر جستجو را تنظیم کنید Set up the search box

• یک منوی کشویی ایجاد کنید Create a dropdown menu

• مهم ترین مورد - کارت را ایجاد کنید Create the most important item – the card

• نحوه بهبود کارت ها How to improve the cards

• پیمایش ثانویه را تنظیم کنید Set up the secondary navigation

• صفحه بندی را ایجاد کنید Create the pagination

• پایه و اساس فوتر را ایجاد کنید Create the foundation for the footer

• افزودن محتوا در فوتر Adding content in the footer

• نحوه برخورد با عیوب بصری How to handle visual imperfections

• در اینجا چیزی است که باید به خاطر بسپارید Here’s what you need to remember

• مسابقه 2: طراحی وبلاگ خودتان Contest 2: Your own blog design

اولین کلید برای طراحی وب عالی The first key to great web design

• معرفی Introduction

• بهترین تنظیمات و اجزای وب سایت Best settings & website components

• مطالعه موردی: طرح‌بندی‌های غیر استاندارد 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

• آنچه باید در مورد تضاد رنگ بدانید What you need to know about 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

• افکار نهایی Final thoughts

کلید دوم برای طراحی وب عالی The second key to great web design

• معرفی 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 perfect?

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

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

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

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

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

• تست صفحات فرود Testing landing pages

• مطالعه موردی: صفحه فرود من Case study: my landing page

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

کلید سوم برای طراحی وب عالی The third key to great web design

• معرفی Introduction

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

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

• فرآیند پرداخت را بهبود بخشید تا فروش را دو برابر کنید 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

• در اینجا چیزی است که باید به خاطر بسپارید Here's what you need to remember

طراحی مجدد یک کسب و کار تجارت الکترونیک Redesign an e-commerce business

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

• مسابقه 3: طراحی تجارت الکترونیکی شما Contest 3: Your own e-commerce design

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

• پایه و اساس پروژه را تنظیم کنید Set up the foundation of the project

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

• هدر را تنظیم کنید Set up the header

• در مورد یک ظاهر طراحی برای هدر تصمیم بگیرید Decide on a styling for the header

• مهمترین قسمت را ایجاد کنید - منطقه قهرمان Create the most important part – the hero area

• ناوبری ثانویه - دسته بندی محصولات را ایجاد کنید Create the secondary navigation – product categories

• اینجا جایی است که فروش انجام می شود ... یا نه! Here’s where sales are made … or not!

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

• استایل کارت را تنظیم کنید Set the style for the card

• کارهای پایانی برای طراحی کارت Finishing touches for the card design

• این جزئیات مهم را فراموش نکنید! Don’t forget about this important detail!

• بخش پرسش و پاسخ را ایجاد کنید Create the FAQ section

• در اینجا دلیل فوق العاده بودن طرح بندی خودکار است Here’s why auto-layout is awesome

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

• پایه فوتر را تنظیم کنید Set up the footer’s foundation

• اتمام پاورقی Finishing the footer

• تغییرات را کاوش کنید و طراحی خود را بهبود بخشید Explore variations & improve your design

• چگونه به صفحات داخلی نزدیک شویم How to approach the interior pages

• قسمت بالایی را برای صفحه محصول تنظیم کنید Set the top area for the product’s page

• افزودن محتوا به صفحه محصول Adding content to the product’s page

• نحوه افزودن تماس‌های واضح برای اقدام برای بازدیدکنندگان How to add clear calls to action for visitors

• حوزه محتوای اصلی Main content area

• یک جدول برای نوار کناری ایجاد کنید Create a table for the sidebar

• نتیجه گیری Conclusions

طراحی ریسپانسیو: از دسکتاپ تا موبایل Responsive design: from desktop to mobile

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

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

• هدر نسخه موبایل را ایجاد کنید Create the header for the mobile version

• نحوه تنظیم مجدد ناحیه قهرمان How to rearrange the hero area

• کارت را برای شبکه محصولات تنظیم کنید Set up the card for the grid of products

• هنگام ایجاد کارت های محصول، این مرحله را نادیده نگیرید Don’t skip this step when creating product cards

• قسمت پرسش و پاسخ را برای نسخه موبایل ترتیب دهید Arrange the FAQ section for the mobile version

• خبرنامه را در فضایی باریک دوباره ایجاد کنید Recreate the newsletter in a narrow space

• پاورقی را برای نسخه موبایل ایجاد کنید Create the footer for the mobile version

• نتیجه گیری Conclusions

کشف کنید که چگونه طراحی به نسخه زنده تبدیل می شود Discover how the design gets transformed to the live version

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

• زپلین - حلقه گم شده! Zeplin - the missing link!

• نحوه راه اندازی پروژه برای کدنویس/کلینت How to set up the project for the coder/client

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

• در اینجا چیزی است که توسعه دهندگان از طراحی شما می خواهند Here’s what developers want from your design

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

• افکار نهایی و آینده Final thoughts and what’s next