آموزش Figma to Webflow برای مبتدیان: وب سایت نمونه کارها را از ابتدا بسازید

Figma to Webflow for Beginners: Build Portfolio Website from Scratch

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

آیا تا به حال خواسته اید یک وب سایت مدرن بدون کد ایجاد کنید؟ سپس این کلاس به شما کمک می کند تا مهارت های طراحی وب خود را با کمک Webflow توسعه دهید.

در این دوره ما این صفحه وب سایت را توسعه دادیم:

سلام دانشجویان،

من Jemsee، طراح جریان وب و تصویرگر دیجیتال از هند هستم.

من به عنوان یک طراح جریان وب و تصویرگر دیجیتالی، به این فکر کردم که یک وب سایت نمونه کارها برای هنرمند طراحی ایجاد کنم که تمام عناصر لازم برای آنها را داشته باشد. بنابراین، در این کلاس، نحوه ایجاد یک وب سایت نمونه کارها با استفاده از Webflow را خواهید دید.

Webflow ابزار قدرتمندی است که به شما امکان می‌دهد وب‌سایت‌های بصری و بدون کد بسازید. این امکان ایجاد وب سایت های مدرن و واکنش گرا را بدون هیچ گونه محدودیت بصری فراهم می کند.

این دوره برای هر کسی که می‌خواهد وب‌سایت بسازد، برگزار می‌شود. حتی ممکن است مبتدی باشید یا شاید یک طراح، یا شاید بخواهید یک طراح وب تمام وقت شوید.

برای شما، Webflow راه حل است.

این کلاس کاملاً از ابتدا است، هر مرحله از ساخت یک وب سایت به طور کامل نشان داده شده است.

این دوره با یادگیری رابط کاربری جریان وب شروع می‌شود و من شما را با تمام عناصر مختلفی که استفاده می‌کنید آشنا می‌کنم.

در پایان این کلاس، شما یاد خواهید گرفت که چگونه هر طرحی را بدون هیچ کدی به یک وب سایت کاملا واکنشگرا تبدیل کنید.

نکات برجسته:

  • درک جریان وب.

  • نکات و ترفندها

  • یک وب سایت از ابتدا بسازید.

پس چرا منتظر هستید؟ امروز آن را تماشا کنید.

برای پروژه کلاس، می‌خواهید 2 نوع انجام دهید.

نوع 1: ابتدا باید وب سایت را شبیه سازی کنید، تصاویر را جایگزین کنید و رنگ ها و محتوا را سفارشی کنید تا وب سایت نمونه کار خود را ایجاد کنید. که بسیار آسان است، و سپس آن را به عنوان پروژه کلاس ارسال کنید.

نوع 2: علاوه بر آن، فایل Figma را که در پایین لینک شده است را پیدا کنید، آن را به حساب Figma خود وارد کنید و شروع به ایجاد یک وب سایت مانند آنچه در این کلاس انجام می دهیم، شوید. همچنین می توانید طرح را مطابق میل خود تغییر دهید.

این تکالیف را که در بالا ذکر کردم انجام دهید. برای دریافت بازخورد در مورد کار خود، می توانید تکلیف خود را در پروژه کلاس ارسال کنید.

برای هرگونه سوال، در بخش بحث به من پینگ کنید. بنابراین من آنجا خواهم بود تا شک شما را برطرف کنم.

فایل Figma و پیوند وب سایت قابل کلون:


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

درس ها Lessons

  • منوی یک صفحه - اسکرول صاف One Page Menu - Smooth Scroll

  • بخش پاورقی - قسمت 3 Footer Section - Part 3

  • نمادهای سایت مورد علاقه و WebClip Site Fav & WebClip Icons

  • بخش فرم تماس - قسمت 3 Contact Form Section - Part 3

  • بخش وبلاگ - قسمت 2 Blog Section - Part 2

  • بخش کارگاه - قسمت 1 Workshop Section - Part 1

  • بخش بنر - قسمت 2 Banner Section - Part 2

  • بخش قیمت گذاری - قسمت 3 Pricing Section - Part 3

  • بخش فرم تماس - قسمت 2 Contact Form Section - Part 2

  • نتیجه گیری، متشکرم! Conclusion, Thank You!

  • صفحه تک پست - قسمت 1 Single Post Page - Part 1

  • بخش برگه مجوز - قسمت 2 Licensing Tab Section - Part 2

  • پاسخگو نهایی و صفحه پست تک پاسخگو Responsive Finalize & Single Post Page Responsive

  • بخش برگه مجوز - قسمت 1 Licensing Tab Section - Part 1

  • بخش توصیفات - قسمت 2 Testimonials Section - Part 2

  • بخش وبلاگ - قسمت 1 Blog Section - Part 1

  • مبانی جریان وب Webflow Basics

  • Tablet View Responsive - Part 2 Tablet View Responsive - Part 2

  • صفحه تک پست - قسمت 2 Single Post Page - Part 2

  • پروژه کلاس Class Project

  • بخش سرصفحه - قسمت 2 Header Section - Part 2

  • تصحیح نام کلاس ها و پاکسازی Correcting Class Names & Clean Up

  • Tablet View Responsive - Part 1 Tablet View Responsive - Part 1

  • تنظیمات فاصله Spacing Adjustments

  • بخش پاورقی - قسمت 1 Footer Section - Part 1

  • بخش کارگاه - قسمت 2 Workshop Section - Part 2

  • بخش گالری - قسمت 2 Gallery Section - Part 2

  • معرفی Introduction

  • بخش گالری - قسمت 1 Gallery Section - Part 1

  • تنظیمات سئو وب سایت SEO Website Settings

  • فرم تماس - دریافت ایمیل های مناسب Contact Form - Getting Proper Emails

  • بخش خدمات - قسمت 1 Service Section - Part 1

  • بخش پرسش و پاسخ - قسمت 1 FAQ Section - Part 1

  • نتایج ممیزی جریان وب Webflow Audit Results

  • بخش درباره من - قسمت 1 About Me Section - Part 1

  • بخش وبلاگ - قسمت 3 Blog Section - Part 3

  • بخش سرصفحه - قسمت 1 Header Section - Part 1

  • اصول پاسخگوی جریان وب Webflow Responsive Basics

  • بخش پرسش و پاسخ - قسمت 2 FAQ Section - Part 2

  • طراحی Figma که ما قصد داریم آن را تبدیل کنیم Figma Design We're Going to Convert

  • بخش توصیفات - قسمت 1 Testimonials Section - Part 1

  • عملکرد وب سایت Website Performance

  • بخش بنر - قسمت 1 Banner Section - Part 1

  • شروع شدن Getting Started

  • وب سایت خود را بر اساس نیاز خود سفارشی کنید Customize Your Website Based On Your Needs

  • بخش توصیفات - قسمت 3 Testimonials Section - Part 3

  • بخش پاورقی - قسمت 2 Footer Section - Part 2

  • بخش فرم تماس - قسمت 1 Contact Form Section - Part 1

  • بخش گالری - قسمت 3 Gallery Section - Part 3

  • بخش قیمت گذاری - قسمت 1 Pricing Section - Part 1

  • نمایش پرتره موبایل پاسخگو است Mobile Portrait View Responsive

  • نمایش منظره موبایل پاسخگو Mobile Landscape View Responsive

  • بخش قیمت گذاری - قسمت 2 Pricing Section - Part 2

  • بخش پرسش و پاسخ - قسمت 3 FAQ Section - Part 3

  • بخش خدمات - قسمت 2 Service Section - Part 2

  • بخش درباره من - قسمت 2 About Me Section - Part 2

  • بخش خبرنامه Newsletter Section

نمایش نظرات

آموزش Figma to Webflow برای مبتدیان: وب سایت نمونه کارها را از ابتدا بسازید
جزییات دوره
6h 35m
57
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
55
از 5
دارد
دارد
دارد
Jemsee
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Jemsee Jemsee

طراح جریان وب و هنرمند دیجیتال

سلام،

من Jemsee، هنرمند دیجیتال طراح جریان وب از هند هستم. من فارغ التحصیل خود را در رشته علوم کامپیوتر به پایان رسانده ام و در حال حاضر به عنوان طراح وب و هنرمند دیجیتال آزاد کار می کنم.

من تصاویر وب را در همه شکلش دوست دارم. هدف من این است که در کلاس هایم مثبت، با انگیزه و الهام بخش باشم. از طریق کلاس خود، می خواهم تکنیک ها و نکاتی را که در این سال ها به دست آورده ام به اشتراک بگذارم.