آموزش طراحی وب و رابط کاربری با استفاده از Figma & Webflow

درس ها Lessons

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

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

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

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

• روش تقلید The Mimic Method

• 155 تایید جدید 155 Approval NEW

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

• جریان وب 2: محتوای قهرمان Webflow 2: Hero content

• 153 یافتن نتیجه کار 153 Finding work conclusion

• توسعه جریان وب 2 Webflow Development 2

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

• تیزر Webflow Webflow Teaser

• پروژه مشتری: فرآیند طراحی خوب Client Project: Good Design Process

• ترفند طراحی: تنش Design Trick: Tension

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

• پروژه مشتری: طراحی پست وبلاگ Client Project: Blog Post Design

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

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

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

• 165 الگوی پیشنهاد جدید 165 Proposal template NEW

• 154 نمای کلی Upwork 154 Upwork overview

• جریان وب: تگ های HTML Webflow: HTML tags

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

• جریان وب 2: مولفه اسلایدر Webflow 2: Slider Component

• جریان وب: نوار ناو (برنامه چت) Webflow: Navbar (Chat App)

• جریان وب 2: فرم ها Webflow 2: Forms

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

• ترفند طراحی: سازگاری Design Trick: Consistency

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

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

• رنگ ها: رنگ های نمونه گیری Colors: Sampling Colors

• عکس ها: قانون یک سوم Photos: Rule of Thirds

• وبلاگ و CMS: موارد CMS Blog & CMS: CMS Items

• پخش زنده: ویرایشگر Going Live: Editor

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

• جریان وب 2: موقعیت یابی Webflow 2: Positioning

• تکلیف: طراحی صفحه اصلی Figma Assignment: Figma Homepage Design

• عکس ها: پوشش های تصویر Photos: Image Overlays

• تکلیف: تراز و شبکه Assignment: Alignment & Grid

• جریان وب: بخش CTA (برنامه چت) Webflow: CTA section (Chat App)

• 166 الگوی پیشنهاد 2 166 Proposal template 2

• پروژه مشتری: طراحی صفحه اصلی قسمت 1 Client Project: Homepage Design Part 1

• بزرگترین راز طراحان - الهام The Biggest secret of designers - Inspiration

• جریان وب 2: سبک های پس زمینه Webflow 2: Background styles

• تایپوگرافی: کجا فونت ها را پیدا کنیم Typography: Where to find fonts

• تکلیف: هیئت خلق و خو Assignment: Mood Board

• جریان وب 2: نوار لغزنده گواهی Webflow 2: Testimonial slider

• تایپوگرافی: فقط دو فونت Typography: Two fonts only

• ترفند طراحی: همپوشانی Design Trick: Overlapping

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

• پروژه مشتری: صفحه پست Wireframes Client Project: Wireframes Post Page

• پاسخگو: گواهی و پاورقی Responsive: Testimonial & Footer

• به پاتوق دانشجویی ما در Discord بپیوندید Join our student hangout on Discord

• جریان وب: تصاویر Webflow: Images

• جریان وب 2: فرم پاورقی Webflow 2: Footer form

• پخش زنده: SEO و انتشار Going Live: SEO & Publish

• پروژه مشتری: خلاصه پروژه Client Project: Project brief

• پروژه مشتری: سبک های Figma Client Project: Figma styles

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

• تکلیف: همپوشانی Assignment: Overlapping

• وبلاگ و CMS: پست پاسخگو Blog & CMS: Responsive post

• جریان وب: دکمه ها و پیوندها Webflow: Buttons & Links

• پروژه مشتری: Wireframes - وبلاگ Client Project: Wireframes - Blog

• وبلاگ و CMS: بلوک نویسنده Blog & CMS: Author block

• وبلاگ و CMS: متن غنی Blog & CMS: Rich Text

• جریان وب: شناور Webflow: Hover

• جریان وب: کلاس های CSS Webflow: CSS Classes

• جریان وب: تایپوگرافی وب Webflow: Web Typography

• پاسخگو: بدنه Responsive: Body

• تکلیف: جفت کردن تایپ فیس Assignment: Typeface Pairing

• پاسخگو: بخش قهرمان Responsive: Hero section

• پروژه مشتری: چرا Wireframing؟ Client Project: Why Wireframing?

• مبانی وب: HTML و CSS Web Basics: HTML and CSS

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

• 161 تعلیق 161 Suspension

• جریان وب: شناور و نمایش Webflow: Float & Display

• رنگ: شکار رنگ Colors: Color hunting

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

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

• نمای کلی کلاس Class Overview

• 162 کلاهبرداری 162 Scams

• تکلیف: سلسله مراتب بصری Assignment: Visual Hierarchy

• پخش زنده: فرم های ارسالی Going Live: Form submissions

• 159 فریلنسر نمی تواند مقاومت کند NEW 159 Freelance cant resist NEW

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

• پروژه مشتری: طراحی وبلاگ Client Project: Blog Design

• تعاملات: تعامل کارت Interactions: Card interaction

• پروژه مشتری: طراحی صفحه اصلی قسمت 3 Client Project: Homepage Design Part 3

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

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

• جریان وب: Flexbox Webflow: Flexbox

• بخش 2: طراحی را مانند یک حرفه ای تمرین کنید PART 2: PRACTICE DESIGN LIKE A PRO

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

• 163 قیمت گذاری 163 Pricing

• ترفند طراحی: فضای سفید Design Trick: White Space

• پروژه مشتری: اجزای Figma Client Project: Figma components

• 157 نشان بهترین مسابقه 157 Best match badge

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

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

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

• Webflow 2: Navbar (برنامه تیم) Webflow 2: Navbar (Team App)

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

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

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

• تکلیف: شخصیت تایپ فیس Assignment: Typeface Personality

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

• پخش زنده: دامنه سفارشی Going Live: Custom domain

• هنر رنگ The Art of Color

• 156 نمایه جدید 156 Profile NEW

• پروژه مشتری: Wireframes - صفحه اصلی قسمت 1 Client Project: Wireframes - Homepage Part 1

• تعاملات: تعامل پیکان 2 Interactions: Arrow interaction 2

• تکلیف: نمونه برداری از رنگ ها Assignment: Sampling Colors

• چیدمان: مجاورت Layout: Proximity

• وبلاگ و CMS: نمادها Blog & CMS: Symbols

• عکس ها: تکنیک های کشت - اکستریم کراپ Photos: Cropping Techniques - Extreme Crop

• پروژه مشتری: کیت Wireframe Client Project: Wireframe kit

• تکلیف: پوشش های تصویر Assignment: Image Overlays

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

• پروژه مشتری: Wireframes - صفحه اصلی قسمت 2 Client Project: Wireframes - Homepage Part 2

• وبلاگ و CMS: تصویر اصلی Blog & CMS: Main image

• 151 پیدا کردن استودیوهای کاری 151 Finding work studios

• مبانی وب: مدل جعبه Web Basics: The Box model

• تعاملات: تعامل پیکان 1 Interactions: Arrow interaction 1

• 167 قرارداد کار آزاد 167 Freelance contract

• 152 پیدا کردن شبکه کاری جدید 152 Finding work networking NEW

• تکلیف: نوع تنظیم Assignment: Setting type

• جریان وب: کلاس های ترکیبی Webflow: Combo classes

• ترفند طراحی: تکرار Design Trick: Repetition

• Webflow 2: Mockup بخش 2 Webflow 2: Mockup section 2

• وبلاگ و CMS: سبک های پویا Blog & CMS: Dynamic styles

• 168 فروش جریان وب جدید 168 Selling webflow NEW

• ترفند طراحی: کنتراست Design Trick: Contrast

• Webflow 2: بخش های عکس Webflow 2: Photo sections

• وبلاگ و CMS: فیلد مرجع Blog & CMS: Reference field

• وبلاگ و CMS: صفحه مجموعه Blog & CMS: Collection page

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

• تکلیف: برش عکس Assignment: Photo Cropping

• وبلاگ و CMS: فهرست مجموعه Blog & CMS: Collection list

• Webflow 2: فلش های لغزنده Webflow 2: Slider arrows

• جریان وب 2: ماکت بخش 1 Webflow 2: Mockup section 1

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

• تکلیف: تنظیم دقیق رنگ ها Assignment: Fine-tuning Colors

• 158 قیمت مناسب 158 Right price

• 160 جلد نامه 160 Cover letters

• 164 ساعتی در مقابل ثابت 164 Hourly vs Fixed

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

• Webflow 2: Footer (برنامه تیم) Webflow 2: Footer (Team App)

• فتوشاپ: آموزش برش Photoshop: Cut Out Tutorial

• 150 پیدا کردن کار آنلاین NEW 150 Finding work online NEW

• Webflow چیست؟ What is Webflow?

• تایپوگرافی: نوع تنظیم Typography: Setting type

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

• وبلاگ و CMS: نوار ناوبری و عنوان Blog & CMS: Navbar & headline

• جریان وب: بلوک های ساختمان صفحه وب Webflow: Webpage Building Blocks

• تکلیف: پیدا کردن عکس Assignment: Finding Photos

• جریان وب: padding & margins Webflow: Padding & Margins

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

• پروژه مشتری: طراحی صفحه اصلی قسمت 2 Client Project: Homepage Design Part 2

• پاسخگو: بخش موکاپ Responsive: Mockup Section

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

• مبانی وب: طراح جریان وب Web Basics: Webflow designer

• جریان وب: تنظیمات اندازه Webflow: Size Settings

• تکلیف: تنش Assignment: Tension

• جریان وب: سلسله مراتب عناصر Webflow: Element Hierarchy

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

• نصب وب سایت نمونه کارها Installing portfolio website

• وبلاگ و CMS: صفحه بندی Blog & CMS: Pagination

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

• وبلاگ و CMS: CMS جریان وب Blog & CMS: Webflow CMS

• پروژه مشتری: Moodboard Client Project: Moodboard

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

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

• چیدمان: اهمیت سلسله مراتب بصری Layout: Importance of Visual Hierarchy

• تایپوگرافی: دسته بندی تایپ فیس Typography: Typeface Categories

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