آموزش طراحی کامل وب: از Figma تا Webflow تا Freelancing

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

شروع شدن Getting Started

• Webflow چیست؟ What is Webflow?

• صفحه منابع را نشانه گذاری کنید Bookmark the Resources Page

• با Webflow ثبت نام کنید Sign up with Webflow

• تیزر Webflow Webflow Teaser

بخش 1: رازهای طراحی خوب PART 1: SECRETS OF GOOD DESIGN

• مقدمه ای بر طراحی خوب Intro to Good Design

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

چیدمان پادشاه است Layout is King

• همه چیز با تراز و شبکه شروع می شود It All Starts With Alignment & Grid

• تمرین: تراز و شبکه Practice: Alignment & Grid

• تراز و تمرین شبکه Alignment & Grid Practice

• بازخورد تکلیف Assignment Feedback

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

• تمرین: سلسله مراتب بصری Practice: Visual Hierarchy

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

• به پاتوق دانشجویی در دیسکورد بپیوندید Join the Student Hangout on Discord

• مراقب توهمات نوری باشید Beware of Optical Illusions

• نزدیکی Proximity

• یادداشت های بخش Section Notes

نحوه استفاده زیبا از تایپوگرافی How to Use Typography Beautifully

• مقدمه ای بر تایپوگرافی Intro to Typography

• تایپ فیس با یک شخصیت همراه است Typeface Comes With a Personality

• دسته بندی تایپ فیس Typeface Categories

• تمرین: شخصیت تایپ فیس Practice: Typeface Personality

• تمرین شخصیت پردازی تایپ فیس Typeface Personality Practice

• نوع تنظیم Setting type

• تمرین: نوع تنظیم Practice: Setting type

• تنظیمات نوع تمرین Setting Type Practice

• فقط دو فونت Two fonts only

• کجا می توان فونت ها را پیدا کرد Where to Find Fonts

• تمرین: جفت کردن تایپ فیس Practice: Typeface Pairing

• تمرین جفت کردن تایپ فیس Typeface Pairing Practice

• یادداشت های بخش Section Notes

هنر رنگ The Art of Color

• مقدمه ای بر رنگ ها Intro to Colors

• رنگ های نمونه برداری Sampling Colors

• تمرین: نمونه برداری از رنگ ها Practice: Sampling Colors

• تمرین نمونه برداری از رنگ ها Sampling Colors Practice

• تنظیم دقیق رنگ ها Fine-tuning Colors

• تمرین: تنظیم دقیق رنگ ها Practice: Fine-tuning Colors

• تنظیم دقیق رنگ ها را تمرین کنید Fine-tuning Colors Practice

• شکار رنگ Color Hunting

• رنگ های برند Brand Colors

• یادداشت های بخش Section Notes

نحوه استفاده از عکس ها برای ایجاد وب سایت های جذاب How to Use Photos to Create Mouthwatering Websites

• معرفی عکس ها Intro to Photos

• پوشش های تصویر Image Overlays

• تمرین: پوشش تصویر Practice: Image Overlays

• رویه های تصویر را تمرین کنید Image Overlays Practice

• تکنیک های برش عکس - برش شدید Photo Cropping Techniques - Extreme Crop

• تکنیک های برش عکس - برش نرم Photo Cropping Techniques - Soft Crop

• تمرین: برش عکس Practice: Photo Cropping

• تمرین برش عکس Photo Cropping Practice

• قانون یک سوم Rule of Thirds

• جعبه آن را باز کنید! Unbox it!

• عکس‌ها را مانند یک حرفه‌ای انتخاب کنید Pick Photos Like a Pro

• کجا عکس ها را پیدا کنیم Where to Find Photos

• تمرین: پیدا کردن عکس Practice: Finding Photos

• تمرین یافتن عکس ها Finding Photos Practice

• یادداشت های بخش Section Notes

6 ترفند طراحی که هر طراح باید بداند 6 Design Tricks Every Designer Should Know

• مقدمه ای بر ترفندهای طراحی Intro to Design Tricks

• تضاد Contrast

• فضای سفید White Space

• تکرار Repetition

• ثبات Consistency

• با هم تداخل دارند Overlapping

• تمرین: همپوشانی Practice: Overlapping

• تمرین همپوشانی Overlapping Practice

• تنش Tension

• تمرین: تنش Practice: Tension

• تنش Tension

• یادداشت های بخش Section Notes

بخش 2: طراحی را مانند یک هنرمند تمرین کنید PART 2: PRACTICE DESIGN LIKE AN ARTIST

• مقدمه ای بر تمرین طراحی Intro to Design Practice

با تقلید از حرفه ای ها تمرین کنید Practice by Mimicking Pros

• روش تقلید Mimic Method

• بزرگترین راز طراحان بزرگ: الهام The Biggest SECRET of Great Designers: Inspiration

• تمرین: هیئت خلق و خو Practice: Mood Board

• تمرین هیئت خلق و خو Mood Board Practice

• تمرین: طراحی صفحه اصلی Figma Practice: Figma Homepage Design

• طراحی صفحه اصلی Figma Figma Homepage Design

• یادداشت های بخش Section Notes

طراحی اولین صفحه وب زیبای شما Designing Your First Beautiful Web Page

• طراحی صفحه اصلی برنامه چت: قسمت 1 Chat App homepage design: Part 1

• طراحی صفحه اصلی برنامه چت: قسمت 2 Chat App homepage design: Part 2

• طراحی صفحه اصلی برنامه چت: قسمت 3 Chat App homepage design: Part 3

• طراحی صفحه اصلی برنامه چت: قسمت 4 Chat App homepage design: Part 4

• طراحی صفحه اصلی برنامه چت Chat App Homepage Design

• یادداشت های بخش Section Notes

بخش 3: توسعه وب (WEBflow) PART 3: WEB DEVELOPMENT (WEBFLOW)

• مقدمه ای بر توسعه جریان وب Intro to Webflow Development

صفحات وب چگونه کار می کنند How Web Pages Work

• معرفی طراح جریان وب Webflow Designer Intro

• HTML و CSS HTML & CSS

• مدل جعبه The Box Model

• سلسله مراتب عناصر Element Hierarchy

• یادداشت های بخش Section Notes

ساخت اولین صفحه وب Building Your First Web Page

• بخش و بلوک Div Section & Div Block

• نسخه فقط خواندنی برنامه چت Read-Only Version of Chat App

• تنظیمات اندازه Size Settings

• بالشتک و حاشیه Padding & Margins

• یادداشت های بخش Section Notes

• تایپوگرافی وب Web Typography

• آموزش های جریان وب Webflow Tutorials

• دکمه ها و لینک ها Buttons and Links

• ذخیره خودکار Webflow Webflow Autosave

• کلاس های CSS CSS Classes

• تنظیمات بوم Canvas Settings

• تصاویر Images

• شناور، ستون ها، نمایشگر Float, Columns, Display

• فلکس باکس Flexbox

• اندازه های Figma در مقابل Webflow Figma vs Webflow Sizes

• چک لیست اشکال زدایی جریان وب Webflow Debugging Checklist

• بازی فلکس باکس Flexbox Game

• نوار ناو (برنامه چت) Navbar (Chat App)

• شناور Hover

• بخش میانی (برنامه چت) Middle Section (Chat App)

• تگ های HTML HTML Tags

• کلاس های ترکیبی Combo Classes

• بخش CTA (برنامه چت) CTA Section (Chat App)

• پاورقی (برنامه چت) Footer (Chat App)

طراحی وب سایت واکنش گرا: زیبا در هر دستگاهی Responsive Web Design: Beautiful on Any Device

• مقدمه ای بر طراحی وب سایت واکنش گرا Intro to Responsive Web Design

• پاسخگو: بخش قهرمان - تبلت Responsive: Hero Section - Tablet

• Responsive: Hero Section - Mobile 1 Responsive: Hero Section - Mobile 1

• Responsive: Hero Section - Mobile 2 Responsive: Hero Section - Mobile 2

• پاسخگو: منوی Nav (برنامه چت) Responsive: Nav Menu (Chat App)

• پاسخگو: سرریز Responsive: Overflow

• پاسخگو: بخش CTA (برنامه چت) Responsive: CTA Section (Chat App)

• پاسخگو: پاورقی (برنامه چت) Responsive: Footer (Chat App)

پخش زنده: راه اندازی اولین صفحه وب خود Going Live: Launching Your First Web Page

• پخش زنده: SEO (برنامه چت) Going Live: SEO (Chat App)

• پخش زنده: انتشار (برنامه چت) Going Live: Publishing (Chat App)

• ویرایشگر جریان وب Webflow Editor

• نتیجه نهایی - برنامه چت Final Result – Chat App

بخش 4: پروژه مشتری از ابتدا تا پایان PART 4: CLIENT PROJECT FROM START TO FINISH

• معرفی پروژه مشتری Intro to Client Project

Nail the Designs: Project Brief، Mood Board، Wireframes، Design Nail the Designs: Project Brief, Mood Board, Wireframes, Design

• فرآیند طراحی خوب Good Design Process

• خلاصه پروژه Project Brief

• هیئت خلق و خو Mood Board

• چرا وایرفریمینگ؟ Why Wireframing?

• سبک های فیگما Figma Styles

• اجزای فیگما Figma Components

• کیت Wireframe Wireframe Kit

• Wireframes – صفحه اصلی قسمت 1 Wireframes – Homepage Part 1

• Wireframes – صفحه اصلی قسمت 2 Wireframes – Homepage Part 2

• Wireframes - صفحه پست Wireframes – Post Page

• Wireframes - وبلاگ Wireframes – Blog

• نتیجه نهایی - Team App Wireframes Final Result – Team App Wireframes

• طراحی صفحه اصلی اپلیکیشن تیم: قسمت 1 Team App Homepage Design: Part 1

• طراحی صفحه اصلی اپلیکیشن تیم: قسمت 2 Team App Homepage Design: Part 2

• طراحی صفحه اصلی اپلیکیشن تیم: قسمت 3 Team App Homepage Design: Part 3

• طراحی پست وبلاگ اپلیکیشن تیم Team App Blog Post Design

• طراحی وبلاگ برنامه تیم Team App Blog Design

• نتیجه نهایی - طراحی برنامه های تیم Final Result – Team App Designs

توسعه: از طراحی تا وب سایت کاربردی Development: From Designs to Functional Website

• مقدمه Intro

• سبک های پس زمینه Background Styles

• حالت فقط خواندنی برنامه تیم Read-Only Mode of Team App

• نوار ناو (برنامه تیم) Navbar (Team App)

• محتوای قهرمان (برنامه تیم) Hero Content (Team App)

• تشکیل می دهد Forms

• بخش ماکت - قسمت 1 (برنامه تیم) Mockup Section – Part 1 (Team App)

• بخش ماکت - قسمت 2 (برنامه تیم) Mockup Section – Part 2 (Team App)

• بخش های عکس (برنامه تیم) Photo Sections (Team App)

• جزء لغزنده Slider Component

• اسلایدر گواهی (برنامه تیم) Testimonial Slider (Team App)

• تثبیت موقعیت Positioning

• فلش های لغزنده Slider Arrows

• پاورقی (برنامه تیم) Footer (Team App)

• فرم پاورقی (برنامه تیم) Footer Form (Team App)

تعاملات: تنفس زندگی در وب سایت شما Interactions: Breathing Life Into Your Website

• معرفی تعاملات Interactions Intro

• تعامل کارت Card Interaction

• تعامل پیکان - قسمت 1 Arrow Interaction – Part 1

• تعامل پیکان - قسمت 2 Arrow Interaction – Part 2

طراحی وب سایت واکنش گرا (وب سایت اپلیکیشن تیم) Responsive Web Design (Team App Website)

• پاسخگو: Navbar (برنامه تیم) Responsive: Navbar (Team App)

• پاسخگو: Hero (برنامه تیم) Responsive: Hero (Team App)

• پاسخگو: بخش Mockup (برنامه تیم) Responsive: Mockup Section (Team App)

• پاسخگو: بدن (برنامه تیم) Responsive: Body (Team App)

• پاسخگو: توصیفات و پاورقی (برنامه تیم) Responsive: Testimonials & Footer (Team App)

وبلاگ و CMS: رفتن از استاتیک به وب سایت پویا Blog & CMS: Going From Static to Dynamic Website

• CMS و محتوای پویا CMS & Dynamic Content

• CMS جریان وب Webflow CMS

• موارد CMS CMS Items

• صفحه مجموعه Collection Page

• وبلاگ: نوار نوار و عنوان Blog: Navbar & Headline

• وبلاگ: نویسنده و بلوک تاریخ Blog: Author & Date Block

• فیلد مرجع Reference Field

• سبک های پویا Dynamic Styles

• وبلاگ: تصویر اصلی Blog: Main Image

• متن غنی Rich Text

• وبلاگ: نویسنده بلوک پایین Blog: Author Block Bottom

• نمادها Symbols

• وبلاگ: صفحه پست پاسخگو Blog: Responsive Post Page

• وبلاگ: صفحه اصلی Blog: Homepage

• لیست مجموعه Collection List

• صفحه بندی Pagination

• وبلاگ: صفحه اصلی پاسخگو Blog: Responsive Homepage

پخش زنده: وب سایت پویا کاملاً کاربردی شما Going Live: Your Fully Functional Dynamic Website

• SEO و انتشار (برنامه تیم) SEO & Publish (Team App)

• فرم های ارسالی Form Submissions

• دامنه سفارشی Custom Domain

• نتیجه نهایی - وب سایت برنامه تیم Final Result – Team App Website

• بیشتر ویدیوهای جریان وب More Webflow Videos

• برنامه های جریان وب، حساب ها و نحوه واگذاری وب سایت به مشتری Webflow Plans, Accounts and How to Handover the Website to the Client

بخش 5: رازهای کسب درآمد از طریق مشاغل آزاد PART 5: SECRETS OF MAKING MONEY FREELANCING

• مقدمه ای بر فریلنسرینگ Intro to Freelancing

وب سایت نمونه کارها خیره کننده ساخته شده برای شما Stunning Portfolio Website Made for You

• وب سایت نمونه کارها Portfolio Website

• تور وب سایت نمونه کارها Portfolio Website Tour

• نصب وب سایت نمونه کارها Installing Portfolio Website

کجا کار آزاد پیدا کنیم Where to Find Freelance Work

• پیدا کردن کار - آنلاین Finding work – Online

• پیدا کردن کار - استودیو Finding work – Studios

• یافتن کار - شبکه سازی Finding work – Networking

• یافتن کار - نتیجه گیری Finding work – Conclusion

• نکات فریلنسینگ از یک دانشجوی موفق Freelancing Tips From a Successful Student

28 نکته برای برنده شدن در Upwork 28 Tips to Win on Upwork

• بررسی اجمالی Upwork Upwork Overview

• نکات 1-3: تایید نمایه شما Tips 1-3: Getting your profile approved

• نکات 4-9: نمایه ای ایجاد کنید که مشتریان را جذب کند Tips 4-9: Create a profile that attracts clients

• نکات 10-12: نشان "بهترین مسابقه" را دریافت کنید Tips 10-12: Get the "best match" badge

• نکات 13-14: قیمت مناسب را پیشنهاد دهید Tips 13-14: Propose the right price

• نکات 15-16: فریلنسری باشید که نمی توانند در برابر آن مقاومت کنند Tips 15-16: Be the freelancer they can't resist

• نکات 17-22: نامه های لعنتی خوب بنویسید Tips 17-22: Write damn good cover letters

• نکات 23-25: خود را معلق نکنید Tips 23-25: Don't get yourself suspended

• نکات 26-28: مورد کلاهبرداری قرار نگیرید Tips 26-28: Don't get scammed

قیمت‌گذاری، الگوی پیشنهادی، و موارد دیگر Pricing, Proposal Template, & More

• قیمت: چقدر هزینه می کنید؟ Pricing: How much do you charge?

• قیمت: ساعتی در مقابل نرخ ثابت Pricing: Hourly vs Fixed Rate

• الگوی پیشنهادی: نرخ ثابت Proposal Template: Fixed Rate

• الگوی پیشنهادی: نرخ ساعتی Proposal Template: Hourly Rate

• قرارداد کار آزاد Freelance Contract

• فروش Webflow به مشتریان Selling Webflow to Clients

قسمت 6: پیشرفته PART 6: ADVANCED

• مقدمه ای برای پیشرفته Intro to Advanced

• محتوای اضافی Extra content

• جریان وب: حالت سفارشی (پاپ آپ) Webflow: Custom Modal (Pop-Up)

• جریان وب: جاسازی کد سفارشی - پلاگین اظهار نظر (نیاز به یک طرح پولی دارد) Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)

• فتوشاپ: چگونه یک برش کششی ایجاد کنیم Photoshop: How To Create a Stretch Crop

• فتوشاپ: چگونه یک تصویر را برش دهیم (جعبه گشایی) Photoshop: How to Cut Out an Image (Unboxing)

• فتوشاپ: آموزش Stick Out Photoshop: Stick Out Tutorial

سخنرانی پاداش Bonus Lecture

• سخنرانی پاداش Bonus Lecture