تمامی جلسات این دوره با رابط کاربری جدید فیگما (Ui3) مجددا ضبط و منتشر شده است.
سوال اصلی اینه: چرا فیگما؟! به همین سادگی اما مهم
این جلسه در مورد فیگما باهاتون صحبت میکنم
این که چرا فیگما رو برای طراحی رابط کاربری انتخاب میکنیم تو این قسمت جواب داده میشه 👈 این شروع یه داستان جذاب تو دوره ی فیگما پلاسه. مطمئن باش قراره مسیر فوق العاده ای رو با هم طی کنیم 🚀
مقدمه ای برای شروع به کار با این نرم افزار دوست داشتنی
خیلیا فک میکنن فیگما نرم افزاریه که به سختی میشه بهش دسترسی داشت. اما این طور نیست، فیگما انواع راه های ساده رو در اختیار ما میذاره تا بتونیم رایگان ازش استفاده کنیم
بهتون میگم هر بخش از نرم افزار چیه و چیکار میکنه
در این بخش موقع اش شده خیلی عملی با بخش های مختلف فیگما آشناتون کنم
در این بخش کار با فریم هارو به شما آموزش میدم
واقعا دونستن شورتکات های کیبورد فیگما، سراعت رو بالا میبره و به راحتی میشه در فیگما به این شورتکات ها مسلط شد.
ترسیم اشکال هندسی به روش های مختلف رو در این قسمت به شما یاد میدم
ازینجا به بعد همه چیزو در قالب یک پروژه جمع و جور واقعی به شما آموزش میدم
کار با ابزار و تنظیمات Text در فیگما در این قسمت آموزش داده میشه
همیشه مدیریت کردن لایه ها از اهمیت ویژگی ای برخورداره! جلوتر بیشتر این مورد رو درک میکنین
این قسمت به شما یاد میدم طرحتونو به راحتی ترازبندی کنین
تنظیمات مربوط به رنگ Fill و Stroke
کار با استایل ها خیلی رو سرعت شما تاثیر گذاره! این قسمت به شما در موردش میگم
کامپاننت ها میتونن کار رو برای شما مثل استایل ها به شدت راحت و جذاب کنن
صفحات برای مدیریت پروژه خیلی لازم و ضروریه. این قسمت میریم سراغش
بعد از تموم شدن کار وایرفریم، خیلی جذاب میشه اگه طرح هارو با فلش به هم وصل کنیم. به این میگن ترسیم فلوچارت
کامیونیتی فیگما از قشنگترین امکانات فیگماست - دنیای فایلهای طراحی رایگان
آشنایی با تنظیمات Auto layout
این قسمت دانشتون در مورد auto layout کمی عمیق تر میشه
این بخش رو با تکمیل طراحی وایرفریم به پایان میرسونیم تا آماده بخش بعدی بشین
در این بخش موقع اش شده خیلی عملی با بخش های مختلف فیگما آشناتون کنم
این قسمت برای شروع طراحی رابط کاربری آماده میشین
اندازه فریم باید چه عددی باشد؟!
تنظیم Grid Layout و استایل بندی آن
استایل های رنگی رو به شما معرفی میکنم و آموزش میدم چطور ازشون استفاده کنین
اصول ایجاد استایل برای تایپوگرافی به دقت تو این جلسه برای شما تشریح میشه
روش های درج تصویر در فیگما رو بهتون میگم
در این قسمت خیلی موجز در مورد ریسپانسیو صحبت میکنم و شما رو برای یادگیری کامل اون آماده میکنم
تنظیمات Boolean Operation در فیگما در این قسمت مورد بررسی قرار میگیره
حالا که استایل هارو ساختیم نوبت به این میرسه ازشون استفاده کنیم
نوبت به این میرسه برای بخش های مختلف کامپاننت ایجاد کنیم، این قسمت به سراغ نو بار میرم
ایجاد ٰVarient کامپاننت به روش Component Set رو به شما آموزش میدم
طراحی صفحه Calendar به صورت کاملا ریسپانسیو
طراحی صفحات Moods برای کامل شدن بخش یو آی
در این بخش هم به سراغ آخرین صفحات رابط کاربری این پروژه میریم و با هم طراحیش میکنیم
تو این بخش به شما یاد میدم از آپشن هایی که فیگما برای پرزنت کارها داره استفاده کنین
بهتون یاد میدم با بخش های پرزنت و پریویو در فیگما کار کنین
با این آموزش یاد میگیرین طرحی که روی فیگما مشغول طراحیش هستین رو توی گوشیتون به صورت زنده ببینین
خیلی مواقع ما لازم داریم صفحات طولانی طراحی کنیم تو این قسمت بهت میگم چیکار کنی که کارت حرفه ای باشه
اگه برات سواله که چطوری باید کارامونو برای کارفرما و یا تیم دولوپ بفرستیم، این جلسه در موردش صحبت میکنم
حتما برات سواله که تیم دولوپ چه چیزی از فیگما میتونه بدست بیاره تا توی کدنویسی کمکش کنه. باید بگم همه چیز این جلسه بهش میپردازیم
همیشه نیاز میشه از بعضی آبجکت ها در فیگما خروجی بگیریم این قسمت موضوعمون همینه
تو این آموزش بهتون یاد میدم که چطوری میتونین از کامپاننت ها و استایل های یک پروژه توی بقیشون هم استفاده کنین
تو این ویدیو بهتون یاد میدم بقیه چطوری برای فایلاشون تامبنیل میذارن
این بخش بهت در مورد این میگم که چطوری میتونی از امکانات پریمیوم فیگما به صورت رایگان استفاده کنی
تا 2 سال از فیگما رایگان استفاده کن
دونستن یه سری نکات خیلی مهمه تا بتونی بهترین عملکرد و کیفیت رو داشته باشی
شاید برای خیلیا بدیهی باشه اما خیلیای دیگه هنوز معنی دقیق پیکسل و تاثیری که روی کیفیت داره رو نمیدونن این ویدیو برای شماست
تو این قسمت در مورد پوینت صحبت میکنیم. واحدی که کلی کار ما رو راحت میکنه
تو این ویدیو به این میپردازیم که با توجه به مواردی که در مورد پوینت و پیکسل دونستیم چیکار کنیم که همه جا کارمون با کیفیت باشه
تو این بخش به سراغ رنگ ها میریم. خیلی مهمه که رنگ درستی انتخاب و استفاده کنیم
تو این ویدیوی کوتاه با ۵ تا از تئوری های رایج رنگ آشناتون میکنم
این قسمت به سراغ یه سری سایت خفن که میتونیم ازشون رنگ های خودمونو تهیه کنیم میرم
شاید خیلی پر اهمیت بنظر نرسه ولی نام گذاری رنگ ها بشدت دارای اهمیته.
حالا که بهتون گفتم رنگو از کجا بیاریم و چجور نامگذاری کنیم نوبت میرسه به این که چطور ازش استفاده کنیم
خیلی جمو جور بهتون میگم که چطور باید پروتوتایپ ایجاد کنیم
هر وقت صحبت از پروتوتایپ میشه اولین چیزی که باید بدونیم، فلو هست. این قسمت به سراغش میریم
این قسمت به شما میگم که با چه روش هایی میتونیم بخش های مختلف رو به هم متصل کنیم
وقتی یک اینتراکشن ایجاد میکنیم، پنل پروتوتایپ برای ما باز میشه. این قسمت بخش های این پنل رو بررسی میکنم
مباحث حرفه ای و پیشرفته Auto layout و Constraint به پنل دانشجویان اضافه شد.
نوبت این رسیده حرفه ای تر به سراغ آپشن های فیگما بریم و مجدد بررسیشون کنیم
همونطور که قبلا هم به شما در موردش گفتم با این ابزار کارهای زیادی میشه انجام داد حتما بعد از هر جلسه موارد گفته شده رو تمرین کنین
تو این قسمت کمی عمیق تر شما رو با کانسترینت افقی و عمودی آشنا میکنم
به جاهای جالب کانسترینت رسیدیم. اینجا بهتون میگم چطوری میشه با کانسترینت و گرید ها یک تقسیم بندی باحال ایجاد کنین
اینجا جالب میشه که میتونین برای هر فریم یک گرید درست کنین و بهش تنظیمات کانسترینت رو بدین!
آیا میتونیم همه جا از این تکنیک استفاده کنیم؟ این جلسه یکی از محدودیت های اونو میگم
بعضی چیزا تو صفحه باید ثابت باشن مثل هدر و نوبار. این جلسه بهتون میگم چطوری میشه اینکارو کرد
تو این بخش هر چیزی که برای طراحی Responsive بهش نیاز دارین رو به شما آموزش میدم
حالا که با Constraint عمیقا آشنا شدین و دونستین باهاش چه کارهایی میتونیم انجام بدیم، نوبت به یادگیری عمیق Auto layout میرسه
شروع کار با تنظیمات Auto layout.
این قسمت جاهایی که میتونین از این آپشن استفاده کنین رو به شما میگم
به سراغ منوی این آپشن میریم و شما رو با بخش های اون آشنا میکنم
حالا که با منوی این آپشن آشنا شدین، برگردیم و حرفه ای تر بهتون بگم توی این منو چخبرمونه!
ریسایز رو قبلا بهتون گفتم حالا نوبت به این رسیده تخصصی تر باهاش کار کنیم
بهتون یاد میدم که با اوتولیاوت یک کارت ریسپانسیو طراحی کنین
تو این آموزش چند قدم جلوتر میریم و یک کارت با چند ستون رو به صورت ریسپانسیو طراحی میکنیم
قبلا به شما گفتم که در کامپاننت ها هم میتونیم از این آپشن استفاده کنیم. بریم سراغش
جادوی Auto layout رو تو این جلسه بهتون آموزش میدم. با دقت همراهم باشین
همونطور که بهتون گفتم ما میتونیم فریم های تو در تو داشته باشیم. این جلسه بهتون میگم چطوری میشه برای همشون Auto layout رو اعمال کنیم
یکی از آپشن های فیگما اینه که میتونیم یک آبجکت رو از قلب Auto layout خارج کنیم و هر جا که دوست داشتیم قرارش بدیم. این جلسه در همین مورد صحبت میکنم
تو این جلسه چنتا کارت خفن و ریسپانسیو رو با هم طراحی میکنیم
نوبت به طراحی یک صفحه کامل و ریسپانسیو رسیده همراهم باشین
تو این جلسه در مورد محدودیت های Auto layout صحبت میکنم
مباحث حرفه ای و پیشرفته BreakPoint ها،Local Variable ها، Component ها و دیزاین سیستم اختصاصی کاکتوس به پنل دانشجویان اضافه شد.
بریک پوینت ها نقاطی هستند که در آن ها تغییرات ریسپانسیو صورت میگیره
چرا باید برای اندازه های مختلف صفحه نمایش طراحی کنیم
گاهی یه جابه جایی ساده میتونه همه چیزو حل کنه!
نحوه نوشتن کد سی اس اس بریک پوینت ها
بررسی اندازه های استاندارد برای بریک پوینت ها
شروع به کار با بریک پوینت ها
آموزش نحوه تست ریسپانسیو از کامپاننت ها
انتقال اصول طراحی به تیم های طراحی و توسعه از طریق مستندنویسی
تکنیکی ساده برای رفع محدودیتهای بریک پوینت در فیگما
طراحی لی اوت های متنوع برای انواع صفحه نمایش
تایپوگرافی رو در بریک پوینت ها فراموش نکن
معرفی پلاگین بریک پوینت
لوکال وریبل ها از امکانات جذاب فیگما برای مدیریت پروژه های طراحی رابط کاربریست.
آشنایی اولیه با لوکال وریبل ها
آموزش ساخت لوکال وریبل در فیگما
مدل های مختلف لوکال وریبل ها
آموزش عملی ساخت لوکال وریبل ها
طراحی صفحات بوسیله لوکال وریبل ها
استفاده حرفهای از لوکال وریبل ها
در این بخش با تنظیمات کامپاننتها بیشتر آشنا خواهید شد. این بخش پیش نیاز ورود به بخش دیزاین سیستم است.
مدلهای مختلف از یک کامپاننت - Component variants
انواع پراپرتیها در مدیریت کامپاننت
پراپرتیهای نست شده درون یک کامپاننت
در این بخش با تمام دانشی که در طول دوره به دست آورده اید،شروع به طراحی یک دیزاین سیستم اختصاصی میکنیم.
معرفی و بررسی دیزاین سیستم های معروف
شروع به کار در طراحی دیزاین سیستم
ساخت استایل های رنگی
ساخت حالتهای رنگی
انتقال استایل های رنگی به لوکال وریبل
ساخت استایل تایپوگرافی
استایلهای ترکیببندی
استایل المانهای بیشتر
بخشی از دیزاین سیستم برای نمایش اطلاعات به صورت سریع
طراحی انواع مدل های دکمه در طراحی رابط کاربری
طراحی نمایش چنتایی دکمه ها در کنار یکدیگر
کامپاننت مربوط به کارت ها در دیزاین سیستم
طراحی کانستراکتیو المنت برای نمایش اطلاعات اطلاعات به صورت لیستی
چند نکته مهم که در ادامه باید در نظر گرفته شود
طراحی چیپ ها برای استفاده بعنوان تگ و... در طراحی رابط کاربری
دکمه های دوگانه که در دیزاین بخش های مختلف بسیار کاربردی است
طراحی فیلد های ورودی داده در دیزاین سیستم
طراحی چک باکس در دیزاین سیستم
طراحی دکمه رادیو در دیزاین سیستم
آپدیت تو راهه! مباحثی که در آپدیت بعدی به دوره اضافه خواهند شد: بررسی تجربه کاربری (Ux) به صورت تخصصی | کیس استادی و پیشبرد یک پروژه واقعی و حرفه ای
سلام 👋!
لطفا شماره موبایل خود را وارد کنید
ورود شما به معنای پذیرش شرایط قلموم و قوانین حریمخصوصی است