Figma for UI/UX: Master Design Web در Figma [ویدئو]

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

مقدمه دوره Introduction to the Course

• معرفی Introduction

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

• اولین طراحی سایت شما Your first website design

• حل اولین طراحی وب سایت شما Solving your first website design

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

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

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

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

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

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

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

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

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

• نتیجه گیری Conclusions

مهم ترین چیزها در مورد 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

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

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

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

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

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

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

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

• در اینجا چیزی است که شما را به یک طراح وب خوب تبدیل می کند Here's what 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

اولین کلید برای طراحی وب عالی The First Key to Great Web Design

• معرفی Introduction

• بهترین تنظیمات و اجزای وب سایت Best Settings and 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

• سه قانون برای آیکون های طراحی وب Three 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 and Website Builders – The Web Designer's Death?

• مطالعه موردی: چهار نسخه از یک وب سایت Case Study: Four Versions of the Same Website

• طرح‌بندی صفحه اصلی تجارت الکترونیک Ecommerce Homepage Layout

• جزئیات محصول تجارت الکترونیک Ecommerce Product Details

• تسویه حساب تجارت الکترونیک Ecommerce Checkout

• چرا وب سایت ها بی نقص نیستند؟ Why Aren't Websites Perfect?

• مطالعات موردی: نیازهای مشتری Case Studies: The Client's Needs

• صفحه فرود در مقابل یک وب سایت Landing Page Versus 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

• هفت تغییر وب سایت که توجه به جزئیات را نشان می دهد Seven 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 Ecommerce Business

• مهم ترین سوال هنگام شروع یک پروژه جدید The Most Important Question When Starting a New Project

• چگونه برای پروژه خود تحقیق و الهام بگیرید 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

• Style را برای کارت تنظیم کنید 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

• Footer's Foundation را راه اندازی کنید Set Up the Footer's Foundation

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

• تغییرات را کاوش کنید و طراحی خود را بهبود بخشید Explore Variations and 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